Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add immediate prop to <Combobox /> for immediately opening the Combobox when the input receives focus #2686

Merged
merged 10 commits into from
Aug 31, 2023
Merged

Add immediate prop to <Combobox /> for immediately opening the Combobox when the input receives focus #2686

merged 10 commits into from
Aug 31, 2023

Commits on Aug 31, 2023

  1. Allow to open combobox on input focus

    @tzurbaev @RobinMalfait
    tzurbaev authored and RobinMalfait committed Aug 31, 2023
    Configuration menu
    Copy the full SHA
    aded397 View commit details
    Browse the repository at this point in the history

  2. Close focused combobox with openOnFocus prop when clicking the button

    @tzurbaev @RobinMalfait
    tzurbaev authored and RobinMalfait committed Aug 31, 2023
    Configuration menu
    Copy the full SHA
    4d40e13 View commit details
    Browse the repository at this point in the history

  3. ensure tabbing through a few fields, doesn't result in an incorrectly… 

    … selected item

When you have a fwe inputs such as:

```html
<form>
   <input />
   <input />
   <input />
   <Combobox>
      <Combobox.Input />
   </Combobox>
   <input />
   <input />
   <input />
</form>
```

Tabbing through this list will open the combobox once you are on the
input field. When you continue tabbing, the first item would be
selected. However, if the combobox is not marked as nullable, it means
that just going through the form means that we set a value we can't
unset anymore.

We still want to open the combobox, we just don't want to select
anything in this case.
    @RobinMalfait
    RobinMalfait committed Aug 31, 2023
    Configuration menu
    Copy the full SHA
    bae4b64 View commit details
    Browse the repository at this point in the history

  4. only openOnFocus if the <Combobox.Input /> is focused from the 

    outside

If the focus is coming from the `<Combobox.Button />` or as a side
effect of selecting an `<Combobox.Option />` then we don't want to
re-open the `<Combobox />`
    @RobinMalfait
    RobinMalfait committed Aug 31, 2023
    Configuration menu
    Copy the full SHA
    bdfec75 View commit details
    Browse the repository at this point in the history

  5. update tests to ensure that the Combobox.Input is the active element

    @RobinMalfait
    RobinMalfait committed Aug 31, 2023
    Configuration menu
    Copy the full SHA
    29e7057 View commit details
    Browse the repository at this point in the history

  6. order handleBlur and handleFocus the same way in Vue & React

    @RobinMalfait
    RobinMalfait committed Aug 31, 2023
    Configuration menu
    Copy the full SHA
    dc6dccf View commit details
    Browse the repository at this point in the history

  7. only select the active option when the Combobox wasn't opened by focu… 

    …sing the input field
    @RobinMalfait
    RobinMalfait committed Aug 31, 2023
    Configuration menu
    Copy the full SHA
    4577735 View commit details
    Browse the repository at this point in the history

  8. convert to immediate prop on the Combobox itself

    @RobinMalfait
    RobinMalfait committed Aug 31, 2023
    Configuration menu
    Copy the full SHA
    08d337a View commit details
    Browse the repository at this point in the history

  9. update changelog

    @RobinMalfait
    RobinMalfait committed Aug 31, 2023
    Configuration menu
    Copy the full SHA
    318485a View commit details
    Browse the repository at this point in the history

  10. ensure we see the "relatedTarget" in Safari 

    Safari doesn't fire a `focus` event when clicking a button, therefore it
does not become the `document.activeElement`, and events like `blur` or
`focus` doesn't set the button as the `event.relatedTarget`.

Keeping track of a history like this solves that problem. We already had
the code for the `FocusTrap` component.
    @RobinMalfait
    RobinMalfait committed Aug 31, 2023
    Configuration menu
    Copy the full SHA
    07f05f5 View commit details
    Browse the repository at this point in the history