DropDown header interaction inconsistent for input and TextInput vs other controls.

[dragonlipz]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

1. Create new vite react-ts project
2. install flowbite-react@0.7.7 (was also occurring with previous versions of 0.7.x)
3. Replace App.tsx contents with Code Example at the end.
4. Run project
5. Open web console for output
6. Select dropdown
7. Put cursor header text box
8. attempt typing
9. Key press down/up log out, on change doesn't with little exception (space, backspace, etc. do work)
10. Pasting a value into the input properly fires off the controls onChange handler
11. Pressing a key that represents the First Character of an item in the list, jumps to that item in the list, removing you from the control.

Current behavior

• You will see the Key pressed value for onKeyDown and onKeyUp but you will never see any output for onChange. It appears the onChange handler is being hijacked somewhere an not being called as a result.

• Non-AlphaNumeric keys seem to properly "act" in the field. (space, backspace, arrows move the cursor as expected)

• Pasting a value into the field triggers onChange properly.

• Other flowbite-react controls such as Tabs, ToggleSwitch, Checkbox, etc., behave as expected.

• Attempting to type a the first character of one of the drop down values (in this case i) will jump you to a row starting with that character.

Expected behavior

• The expectation is the input and TextInput controls would behave as normal. And I would be able to prevent the automatic search of items in the dropdown.

Context

Code Example

import './App.css';
import { Dropdown } from 'flowbite-react';

function App() {
  return (
    <>
      <Dropdown label="hello">
        <Dropdown.Header>
          <div className="p-3">
            <div className="relative">
              <input
                className="w-full"
                onChange={(e) => console.log(e?.target.value)}
                onKeyDown={(e) => console.log(e?.key)}
                onKeyUp={(e) => console.log(e?.key)}
              />
            </div>
          </div>
        </Dropdown.Header>
        <Dropdown.Item>item0</Dropdown.Item>
        <Dropdown.Item>item1</Dropdown.Item>
        <Dropdown.Item>item2</Dropdown.Item>
      </Dropdown>
    </>
  );
}

export default App;

[Pol Maresma]

Same is happening to me, thought the Dropdown may have an option to disable the navigation with first letters of the Items, but was not able to find any.

[Olaoluwa Owonikoko]

Please any update on this, or any solution i can work with for now @polnetwork @dragonlipz

[Sutu Sebastian]

Fixed in flowbite-react@0.10.0 release.