Close select on escape key

[wadjih-bencheikh18]

closes : #632

closes : #622

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	0198dce
Status:	✅  Deploy successful!
Preview URL:	https://10f61b34.react-science.pages.dev
Branch Preview URL:	https://632-select-does-not-close-on.react-science.pages.dev

View logs

[codecov-commenter]

Codecov Report

Attention: 183 lines in your changes are missing coverage. Please review.

Comparison is base (6c34c34) 23.51% compared to head (0198dce) 22.13%.
Report is 12 commits behind head on main.

Files	Patch %	Lines
stories/components/select.stories.tsx	0.00%	131 Missing ⚠️
src/components/hooks/useSelect.tsx	10.34%	52 Missing ⚠️

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #645      +/-   ##
==========================================
- Coverage   23.51%   22.13%   -1.39%     
==========================================
  Files         221      221              
  Lines       12607    13181     +574     
  Branches      235      236       +1     
==========================================
- Hits         2965     2917      -48     
- Misses       9553    10174     +621     
- Partials       89       90       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[stropitek]

It fixes the original problem but it introduces other ones. Keyboard navigation is broken

CleanShot.2024-02-08.at.14.42.33.mp4

[wadjih-bencheikh18]

@stropitek Fixed, Could you please recheck categories-nested story.
I found that it wasn't practical so I tried to improve it.

[stropitek]

Ref: #622

Did you base your resolution on palantir/blueprint#4244 (comment)?

[wadjih-bencheikh18]

Did you base your resolution on palantir/blueprint#4244 (comment)?

This solution also have the same problem "Keyboard navigation is broken".

[wadjih-bencheikh18]

Ref: #622

Fixed, Could you check please?

[stropitek]

Mouse interaction is broken

CleanShot.2024-02-12.at.18.22.00.mp4

I think this component library is a great source of inspiration for how accessible components should work:
https://react-spectrum.adobe.com/react-spectrum/Menu.html#dynamic

If possible we should try to mimic their behavior

[stropitek]

You can check what radix-ui has in terms of nested menus.

If blueprintjs is too broken maybe it's possible to mix the accessibility of radix-ui with the presentation of blueprintjs

[wadjih-bencheikh18]

I fixed what you mentioned.
Otherwise if you prefer other scenario please describe it.

[wadjih-bencheikh18]

If blueprintjs is too broken

I think blueprintjs components are good but the examples in the documentation are not enough

[stropitek]

I fixed what you mentioned.
Otherwise if you prefer other scenario please describe it.

It is good enough for now. Anyway I think nested menu aren't really a thing we should use in a select component. It makes more sense in a dropdown menu.