playbook_ui 17.1.0 → 17.2.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b282160685aeb7935309b54bddb2856ff20b4957a8ca3455a268ab52693bb8e7
-  data.tar.gz: 31b055f1c7c84e23d99b25cb980a5ad370f53088e265308ccd4e72a0b74500ba
+  metadata.gz: 02e9d48053efc7bc4dde6c77d9b396a21e3b35f8343a35eb334f816c5e7423f8
+  data.tar.gz: a275c089998b99dfd64fb86754fd9db545214fb12bde587411e8100cedb1bf88
 SHA512:
-  metadata.gz: ce34582a3e72b462fa81e781a464f4f1352aaad7a37ffbace981816b5ec899397a6c29d8aa487af44d0fe20bda2f2d8280574bbf5a0a31548eed4c8e576976d8
-  data.tar.gz: 41690ad445b535cab92bb9a8c7a1e3c23e382b2e3661def036d7b85b16b7d2f6ec5c4419b22cdabdfc96f289231be50a4241d583e716a038a19efd82dfd63b3d
+  metadata.gz: d0dc9ada45182473c6d16c6f04b3a961ab99dfc02f8c476ed274ffec5ae0b44df9836fc598b123a44cf5f02d43d420efd63ca5253ef4fa18b20835b23eada81d
+  data.tar.gz: e794e5364b4ac28a62091f95be02f5ed01e8c5108fbfd86ee70cd11bee5d58241688ec797a8c2576ba591f7379cbfb2ff9a8ebe7aad5834e1e5d5f2ccfd7b599

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -1076,6 +1076,30 @@
       }
     }
 
+    // Firefox-specific fix for vertical borders disappearing upon row hover
+    .pb_table.vertical-border .pb_advanced_table_body {
+      tr:not(.virtualized-table-row) td:not(:last-child):not(.last-cell),
+      .pb_table_tr:not(.virtualized-table-row) .pb_table_td:not(:last-child):not(.last-cell) {
+        position: relative;
+        border-right-color: transparent !important;
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          right: -1px;
+          bottom: -1px;
+          width: 1px;
+          background-color: var(--table-border-color);
+        }
+
+        // The base kit gives the first column's divider the column group color
+        &:first-child::before {
+          background-color: var(--column-border-color);
+        }
+      }
+    }
+
     &[class*="column-group-border-"] {
       .pb_advanced_table_header {
         th[colspan]:not([colspan="1"]):not(:last-child),
@@ -1122,6 +1146,14 @@
         }
       }
 
+      // --table-border-color stays light in dark mode, matches token of base kit's dark vertical border
+      .pb_table.vertical-border .pb_advanced_table_body {
+        tr:not(.virtualized-table-row) td:not(:last-child):not(.last-cell)::before,
+        .pb_table_tr:not(.virtualized-table-row) .pb_table_td:not(:last-child):not(.last-cell)::before {
+          background-color: $border_dark;
+        }
+      }
+
       &[class*="column-group-border-"] {
         .pb_advanced_table_header {
           th[colspan]:not([colspan="1"]):not(:last-child),

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -112,6 +112,8 @@ type DropdownProps = {
     isClosed?: boolean;
     label?: string;
     multiSelect?: boolean;
+    name?: string;
+    onChange?: (event: { target: { name?: string; value: any } }) => void;
     onSelect?: (arg: GenericObject) => null;
     options?: GenericObject;
     placeholder?: string;
@@ -156,6 +158,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         label,
         multiSelect = false,
         formPillProps,
+        name,
+        onChange,
         onSelect,
         options,
         placeholder,
@@ -414,6 +418,10 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setIsDropDownClosed(false);
     };
 
+    const handleSelectionChange = (value: any) => {
+        onSelect && onSelect(value);
+        onChange && onChange({ target: { name, value } });
+    };
 
       const handleOptionClick = (clickedItem: GenericObject) => {
                 if (disabled) return;
@@ -426,7 +434,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                        const next = exists
                        ? list.filter((option) => option.value !== clickedItem.value)
                            : [...list, clickedItem];
-                   onSelect && onSelect(next);
+                   handleSelectionChange(next);
                        return next;
                    });
                    setFilterItem("");
@@ -439,7 +447,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                    if (shouldCloseOnClick) {
                        setIsDropDownClosed(true);
                    }
-                   onSelect && onSelect(clickedItem);
+                   handleSelectionChange(clickedItem);
                    
                    // Sync with DatePickers if this is a quickpick variant
                    if (variant === "quickpick" && Array.isArray(clickedItem.value)) {
@@ -468,10 +476,10 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
       if (disabled) return;
       if (multiSelect) {
         setSelected([]);
-        onSelect && onSelect([]);
+        handleSelectionChange([]);
       } else {
         setSelected({});
-        onSelect && onSelect(null);
+        handleSelectionChange(null);
         setFocusedOptionIndex(-1);
         setFilterItem("");
         
@@ -505,10 +513,10 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
       clearSelected: () => {
         if (multiSelect) {
           setSelected([]);
-          onSelect && onSelect([]);
+          handleSelectionChange([]);
         } else {
           setSelected({});
-          onSelect && onSelect(null);
+          handleSelectionChange(null);
         }
         setFilterItem("");
         setIsDropDownClosed(true);
@@ -522,16 +530,16 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         clearSelected: () => {
           if (multiSelect) {
             setSelected([]);
-            onSelect && onSelect([]);
+            handleSelectionChange([]);
           } else {
             setSelected({});
-            onSelect && onSelect(null);
+            handleSelectionChange(null);
           }
           setFilterItem("");
           setIsDropDownClosed(true);
         },
       };
-    }, [multiSelect, onSelect, setSelected, setFilterItem, setIsDropDownClosed]);
+    }, [multiSelect, handleSelectionChange, setSelected, setFilterItem, setIsDropDownClosed]);
 
     useImperativeHandle(ref, () => imperativeRef.current);
 
@@ -594,6 +602,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     handleBackspace,
                     handleChange,
                     handleOptionClick,
+                    handleSelectionChange,
                     handleWrapperClick,
                     inputRef,
                     inputWrapperRef,

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_dynamic_options.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("select", props: {
+  id: "color_context_dropdown",
+  label: "Choose a Color",
+  name: "color_name",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" },
+  ],
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-dynamic-options",
+  label: "Pick a Shade",
+  name: "shade_name",
+  context_selector: "color_context_dropdown",
+  options_by_context: {
+    "red" => [
+      { id: "scarlet", label: "Scarlet", value: "scarlet" },
+      { id: "mahogany", label: "Mahogany", value: "mahogany" },
+      { id: "crimson", label: "Crimson", value: "crimson" },
+    ],
+    "blue" => [
+      { id: "sky", label: "Sky Blue", value: "sky" },
+      { id: "cerulean", label: "Cerulean", value: "cerulean" },
+      { id: "navy", label: "Navy", value: "navy" },
+    ],
+    "green" => [
+      { id: "emerald", label: "Emerald", value: "emerald" },
+      { id: "mint", label: "Mint", value: "mint" },
+      { id: "olive", label: "Olive", value: "olive" },
+    ],
+  },
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_dynamic_options.md

@@ -0,0 +1,4 @@
+You can set up a dropdown to update its options dynamically based on another input. To achieve this:
+- Give the dropdown a unique `id` so it can be targeted by events and linked to a controlling input.
+- Use `context_selector` to point at the controlling select’s `id`. On connect, and whenever that select’s value changes, the Dropdown reads the current value as its context.
+- Use `options_by_context` to pass a hash of option lists. Keys must match the possible values of the controlling select; each key maps to an array of `{ id, label, value }` options that replace the Dropdown’s options for that context.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_dynamic_options_with_autocomplete.html.erb

@@ -0,0 +1,35 @@
+<%= pb_rails("select", props: {
+  id: "color_context_dropdown_autocomplete",
+  label: "Choose a Color",
+  name: "color_name_autocomplete",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" },
+  ],
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-dynamic-options-autocomplete",
+  label: "Pick a Shade",
+  name: "shade_name_autocomplete",
+  autocomplete: true,
+  context_selector: "color_context_dropdown_autocomplete",
+  options_by_context: {
+    "red" => [
+      { id: "scarlet", label: "Scarlet", value: "scarlet" },
+      { id: "mahogany", label: "Mahogany", value: "mahogany" },
+      { id: "crimson", label: "Crimson", value: "crimson" },
+    ],
+    "blue" => [
+      { id: "sky", label: "Sky Blue", value: "sky" },
+      { id: "cerulean", label: "Cerulean", value: "cerulean" },
+      { id: "navy", label: "Navy", value: "navy" },
+    ],
+    "green" => [
+      { id: "emerald", label: "Emerald", value: "emerald" },
+      { id: "mint", label: "Mint", value: "mint" },
+      { id: "olive", label: "Olive", value: "olive" },
+    ],
+  },
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_dynamic_options_with_autocomplete.md

@@ -0,0 +1 @@
+Dynamic options also work with `autocomplete`. Use the same `context_selector` and `options_by_context` setup as Dynamic Options, and set `autocomplete: true` so the Dropdown can be filtered by typing. 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_dynamic_options_with_multi_select.html.erb

@@ -0,0 +1,35 @@
+<%= pb_rails("select", props: {
+  id: "color_context_dropdown_multi",
+  label: "Choose a Color",
+  name: "color_name_multi",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" },
+  ],
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-dynamic-options-multi",
+  label: "Pick Shades",
+  name: "shade_names",
+  multi_select: true,
+  context_selector: "color_context_dropdown_multi",
+  options_by_context: {
+    "red" => [
+      { id: "scarlet", label: "Scarlet", value: "scarlet" },
+      { id: "mahogany", label: "Mahogany", value: "mahogany" },
+      { id: "crimson", label: "Crimson", value: "crimson" },
+    ],
+    "blue" => [
+      { id: "sky", label: "Sky Blue", value: "sky" },
+      { id: "cerulean", label: "Cerulean", value: "cerulean" },
+      { id: "navy", label: "Navy", value: "navy" },
+    ],
+    "green" => [
+      { id: "emerald", label: "Emerald", value: "emerald" },
+      { id: "mint", label: "Mint", value: "mint" },
+      { id: "olive", label: "Olive", value: "olive" },
+    ],
+  },
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_dynamic_options_with_multi_select.md

@@ -0,0 +1 @@
+Dynamic options also work with `multi_select`. Use the same `context_selector` and `options_by_context` setup as Dynamic Options, and set `multi_select: true` to allow selecting multiple options.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_react_hook.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import Dropdown from '../_dropdown'
+import Title from '../../pb_title/_title'
+import { useForm } from 'react-hook-form'
+
+const options = [
+  { label: 'United States', value: 'unitedStates', id: 'us' },
+  { label: 'United Kingdom', value: 'unitedKingdom', id: 'gb' },
+  { label: 'Canada', value: 'canada', id: 'ca' },
+  { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  { label: 'India', value: 'india', id: 'in' },
+  { label: 'Australia', value: 'australia', id: 'au' },
+  { label: 'New Zealand', value: 'new Zealand', id: 'nz' },
+  { label: 'Italy', value: 'italy', id: 'it' },
+  { label: 'Spain', value: 'spain', id: 'es' },
+]
+
+const DropdownMultiSelectReactHook = (props) => {
+  const { register, watch } = useForm()
+
+  const selectedCountries = watch('countries')
+
+  return (
+    <>
+      <Dropdown
+          label="Countries"
+          multiSelect
+          options={options}
+          {...props}
+          {...register('countries')}
+      />
+      <Title
+          marginTop="sm"
+          size={4}
+          text="Selected Countries"
+      />
+      {selectedCountries && selectedCountries.map(country => (
+        <p key={country.id}>{`${country.label} - ${country.value}`}</p>
+      ))}
+    </>
+  )
+}
+
+export default DropdownMultiSelectReactHook

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_react_hook.md

@@ -0,0 +1 @@
+You can pass `react-hook-form` props to a multi-select Dropdown. Spread `register` onto Dropdown with `multiSelect` to keep the selected options array in form state.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_react_hook.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import Dropdown from '../_dropdown'
+import Title from '../../pb_title/_title'
+import { useForm } from 'react-hook-form'
+
+const options = [
+  { label: 'United States', value: 'unitedStates', id: 'us' },
+  { label: 'Canada', value: 'canada', id: 'ca' },
+  { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+]
+
+const DropdownReactHook = (props) => {
+  const { register, watch } = useForm()
+
+  const selectedCountry = watch('country')
+
+  return (
+    <>
+      <Dropdown
+          label="Countries"
+          options={options}
+          {...props}
+          {...register('country')}
+      />
+      <Title
+          marginTop="sm"
+          size={4}
+          text="Selected Country"
+      />
+      <p>{selectedCountry && `${selectedCountry.label} - ${selectedCountry.value}`}</p>
+    </>
+  )
+}
+
+export default DropdownReactHook

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_react_hook.md

@@ -0,0 +1 @@
+You can pass `react-hook-form` props to the Dropdown kit. Spread `register` onto a single-select Dropdown to keep the selected option in form state.

data/app/pb_kits/playbook/pb_dropdown/docs/_playground.json

@@ -88,6 +88,7 @@
       "name": "Content",
       "props": [
         "label",
+        "name",
         "placeholder",
         "options",
         "defaultValue",
@@ -130,6 +131,7 @@
     {
       "name": "Events",
       "props": [
+        "onChange",
         "onSelect"
       ]
     }

data/app/pb_kits/playbook/pb_dropdown/docs/_playground.overrides.json

@@ -70,6 +70,7 @@
       "name": "Content",
       "props": [
         "label",
+        "name",
         "placeholder",
         "options",
         "defaultValue",
@@ -111,7 +112,7 @@
     },
     {
       "name": "Events",
-      "props": ["onSelect"]
+      "props": ["onChange", "onSelect"]
     }
   ],
   "presets": [

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml

@@ -39,6 +39,9 @@ examples:
   - dropdown_disabled: Disabled Input
   - dropdown_grouped_options: Grouped Options
   - dropdown_custom_event_type: Custom Event Type
+  - dropdown_dynamic_options: Dynamic Options
+  - dropdown_dynamic_options_with_autocomplete: Dynamic Options with Autocomplete
+  - dropdown_dynamic_options_with_multi_select: Dynamic Options with Multi Select
 
   react:
   - dropdown_default: Default
@@ -81,3 +84,6 @@ examples:
   - dropdown_required_indicator: Required Indicator
   - dropdown_disabled: Disabled Input
   - dropdown_grouped_options: Grouped Options
+  - dropdown_react_hook: React Hook
+  - dropdown_multi_select_react_hook: React Hook Multi Select
+

data/app/pb_kits/playbook/pb_dropdown/docs/index.js

@@ -1,4 +1,6 @@
 export { default as DropdownDefault } from './_dropdown_default.jsx'
+export { default as DropdownReactHook } from './_dropdown_react_hook.jsx'
+export { default as DropdownMultiSelectReactHook } from './_dropdown_multi_select_react_hook.jsx'
 export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
 export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
 export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -59,6 +59,14 @@ module Playbook
                                 default: false
       prop :custom_event_type, type: Playbook::Props::String,
                                default: ""
+      prop :options_by_context, type: Playbook::Props::HashProp,
+                                default: {}
+      prop :context_selector, type: Playbook::Props::String,
+                              default: ""
+      prop :clear_on_context_change, type: Playbook::Props::Boolean,
+                                     default: true
+      prop :options_event_type, type: Playbook::Props::String,
+                                default: ""
 
       def data
         Hash(prop(:data)).merge(
@@ -73,7 +81,11 @@ module Playbook
           end_date_id: variant == "quickpick" ? end_date_id : nil,
           controls_start_id: variant == "quickpick" && controls_start_id.present? ? controls_start_id : nil,
           controls_end_id: variant == "quickpick" && controls_end_id.present? ? controls_end_id : nil,
-          custom_event_type: custom_event_type.presence
+          custom_event_type: custom_event_type.presence,
+          pb_dropdown_options_by_context: options_by_context.present? ? options_by_context.to_json : nil,
+          pb_dropdown_context_selector: context_selector.presence,
+          pb_dropdown_clear_on_context_change: clear_on_context_change,
+          options_event_type: options_event_type.presence
         ).compact
       end
 

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, screen, fireEvent, waitFor } from "../utilities/test-utils"
+import { render, screen, fireEvent, waitFor, act } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
 import DateTime from "../pb_kit/dateTime.ts"
@@ -995,4 +995,207 @@ test('disabled prop disables autocomplete input', () => {
   const input = kit.querySelector('.dropdown_input')
 
   expect(input).toBeDisabled()
-})
+})
+
+test('onChange uses react-hook-form event shape', () => {
+  const onChange = jest.fn()
+
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        name="color"
+        onChange={onChange}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
+
+  expect(onChange).toHaveBeenCalledWith({
+    target: { name: 'color', value: options[0] },
+  })
+})
+
+test('react-hook-form onChange receives selected options for multiSelect', () => {
+  const onChange = jest.fn()
+
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        multiSelect
+        name="languages"
+        onChange={onChange}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
+  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
+
+  expect(onChange.mock.calls[0][0]).toEqual({
+    target: { name: 'languages', value: [options[0]] },
+  })
+  expect(onChange.mock.calls[1][0]).toEqual({
+    target: { name: 'languages', value: [options[0], options[1]] },
+  })
+})
+
+test('onSelect still fires when onChange is provided', () => {
+  const onSelect = jest.fn()
+  const onChange = jest.fn()
+
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        name="country"
+        onChange={onChange}
+        onSelect={onSelect}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
+
+  expect(onSelect).toHaveBeenCalledWith(options[0])
+  expect(onChange).toHaveBeenCalledWith({
+    target: { name: 'country', value: options[0] },
+  })
+})
+
+test('onSelect-only single select still receives the option object', () => {
+  const onSelect = jest.fn()
+
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        onSelect={onSelect}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
+
+  expect(onSelect).toHaveBeenCalledTimes(1)
+  expect(onSelect).toHaveBeenCalledWith(options[0])
+})
+
+test('onSelect-only multiSelect still receives the selected options array', () => {
+  const onSelect = jest.fn()
+
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        multiSelect
+        onSelect={onSelect}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
+  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
+
+  expect(onSelect.mock.calls[0][0]).toEqual([options[0]])
+  expect(onSelect.mock.calls[1][0]).toEqual([options[0], options[1]])
+})
+
+test('onSelect-only clearSelected still receives null', () => {
+  const onSelect = jest.fn()
+  const dropdownRef = React.createRef()
+
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        defaultValue={options[0]}
+        onSelect={onSelect}
+        options={options}
+        ref={dropdownRef}
+    />
+  )
+
+  act(() => {
+    dropdownRef.current.clearSelected()
+  })
+
+  expect(onSelect).toHaveBeenCalledWith(null)
+})
+
+test('onSelect-only clear icon still receives null', () => {
+  const onSelect = jest.fn()
+
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        defaultValue={options[0]}
+        onSelect={onSelect}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  fireEvent.click(kit.querySelector('[aria-label="times icon"]').closest('div'))
+
+  expect(onSelect).toHaveBeenCalledWith(null)
+})
+
+test('onSelect-only removing a multiSelect pill still receives remaining options', () => {
+  const onSelect = jest.fn()
+
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        defaultValue={[options[0], options[1]]}
+        multiSelect
+        onSelect={onSelect}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  fireEvent.click(kit.querySelector('.pb_form_pill_close'))
+
+  expect(onSelect).toHaveBeenCalledWith([options[1]])
+})
+
+test('autocomplete typing does not fire onSelect or onChange', () => {
+  const onSelect = jest.fn()
+  const onChange = jest.fn()
+
+  render(
+    <Dropdown
+        autocomplete
+        data={{ testid: testId }}
+        onChange={onChange}
+        onSelect={onSelect}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  fireEvent.change(kit.querySelector('.dropdown_input'), { target: { value: 'Can' } })
+
+  expect(onSelect).not.toHaveBeenCalled()
+  expect(onChange).not.toHaveBeenCalled()
+})
+
+test('autocomplete selection still fires onSelect', () => {
+  const onSelect = jest.fn()
+
+  render(
+    <Dropdown
+        autocomplete
+        data={{ testid: testId }}
+        onSelect={onSelect}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[1])
+
+  expect(onSelect).toHaveBeenCalledWith(options[1])
+})