Dropdown with search input

[grasdira]

Hello,
I've created a custom component that includes a search input. However, there's an issue with the onChange handler – it doesn't trigger when I input English alphabets, numbers, or symbols.
Surprisingly, it works fine when I input Chinese characters and space.
I'm not entirely sure if the issue is caused by the Dropdown component. Can someone provide me with some advice or suggestions to troubleshoot this problem?

I am new to Typescript and GitHub community, please let me know if I got anything wrong, thanks a lot!! 😄

My component looks like ↓

My code so far ↓ ( I use Next.js 13.4.10 and TypeScript )

interface Option {
  id: string;
  title: ReactNode | string;
  subtitle?: ReactNode;
  imageUrl?: string;
}

interface CheckboxFilterDropdownProps {
  label: string;
  options: Option[];
  icon: ReactNode;
  searchInput?: ReactNode;
}

interface SearchableCheckboxFilterDropdownProps
  extends CheckboxFilterDropdownProps {
  searchPlaceholder: string;
}

// CheckboxFilterDropdown: the basic dropdown with checkbox

export const CheckboxFilterDropdown: React.FC<CheckboxFilterDropdownProps> = ({
  label,
  options,
  icon,
  searchInput,
}) => {
  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);

  const handleCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
    const selectedValue = event.target.value;
    setSelectedOptions((prevSelected) =>
      prevSelected.includes(selectedValue)
        ? prevSelected.filter((status) => status !== selectedValue)
        : [...prevSelected, selectedValue]
    );
  };

  return (
    <Dropdown
      inline
      ...otherProps
    >
      <li>{searchInput}</li>
      <ul className="max-h-52 overflow-y-auto">
        {options.map(({ id, title, subtitle, imageUrl }, index) => (
          ...render checkbox list
        ))}
      </ul>
    </Dropdown>
  );
};

// SearchableCheckboxFilterDropdown: dropdown with search input

export const SearchableCheckboxFilterDropdown: React.FC<
  SearchableCheckboxFilterDropdownProps
> = ({ label, options, icon, searchPlaceholder }) => {
  const [searchText, setSearchText] = useState<string>("");
  const filteredOptions = options.filter((option) =>
    option.title?.toString().toLowerCase().includes(searchText.toLowerCase())
  );

  const handleSearchInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();
    console.log(event);
    console.log(event.target.value); // only Chinese characters work, and when English alphabets, numbers, and symbols are entered, nothing happens.
    setSearchText(event.target.value);
  };

  return (
    <div>
      <CheckboxFilterDropdown
        label={label}
        options={filteredOptions}
        icon={icon}
        searchInput={
          <TextInput
            type="text"
            placeholder={searchPlaceholder}
            icon={IconSearch}
            value={searchText}
            onChange={handleSearchInputChange}
          />
        }
      />
    </div>
  );
};

[tulup-conner]

This is certainly interesting! I have had a few controlled text inputs in my apps driven by flowbite-react for a while so I am pretty confident onChange normally works correctly.

However, I definitely haven't done this inside of a Dropdown... that could be the problem. It might be worth trying to see if inputs outside of a Dropdown work correctly. It's plausible the Dropdown - which is powered by floating ui underneath this library - has some code that intercepts keyboard input for accessibility control. I don't remember off the top of my head.

If that's the case, we will want to change the library to make it so you can do both. I'm not sure how yet.

[grasdira]

The input outside the Dropdown does work correctly ✅
I also noticed the mention of the floating UI. I might take some time to explore its features and see how it interacts with the input.

[tulup-conner]

Do report back! It might be something you can control via stopPropagation https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#example_5_event_propagation

[BehzadKhodapanah1993]

That's the propagation problem at all. I was inserting custom search input inside of dropdown from Flowbite-react! so onChange listener even didn't called at all! all you have to do is adding onKeyDown event listener to your input and include event.stopPropagation() inside this listener! after that onChange listener will got your input.

[grasdira]

Thank you for your suggestion!