huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bdd1b3b7856c30c59a77b22f18f7227f0c0499fa
headlessui/packages/@headlessui-react/CHANGELOG.md
T
Robin Malfait bdd1b3b785 Improve outside click of Dialog component (#1546) 
* convert dialog in playground to use Dialog.Panel

* convert `tabs-in-dialog` example to use `Dialog.Panel`

* add scrollable dialog example to the playground

* simplify `outside click` behaviour

Here is a little story. We used to use the `click` event listener on the
window to try and detect whether we clicked outside of the main area we
are working in.

This all worked fine, until we got a bug report that it didn't work
properly on Mobile, especially iOS. After a bit of debugging we switched
this behaviour to use `pointerdown` instead of the `click` event
listener. Worked great! Maybe...

The reason the `click` didn't work was because of another bug fix. In
React if you render a `<form><Dialog></form>` and your `Dialog` contains
a button without a type, (or an input where you press enter) then the
form would submit... even though we portalled the `Dialog` to a
different location, but it bubbled the event up via the SyntethicEvent
System. To fix this, we've added a "simple" `onClick(e) { e.stopPropagation() }`
to make sure that click events didn't leak out.

Alright no worries, but, now that we switched to `pointerdown` we got
another bug report that it didn't work on older iOS devices. Fine, let's
add a `mousedown` next to the `pointerdown` event. Now this works all
great! Maybe...

This doesn't work quite as we expected because it could happen that both
events fire and then the `onClose` of the Dialog component would fire
twice. In fact, there is an open issue about this: #1490 at the time of
writing this commit message.
We tried to only call the close function once by checking if those
events happen within the same "tick", which is not always the case...

Alright, let's ignore that issue for a second, there is another issue
that popped up... If you have a Dialog that is scrollable (because it is
greater than the current viewport) then a wild scrollbar appears (what a
weird Pokémon). The moment you try to click the scrollbar or drag it the
Dialog closes. What in the world...?

Well... turns out that `pointerdown` gets fired if you happen to "click"
(or touch) on the scrollbar. A click event does not get fired. No
worries we can fix this! Maybe...

(Narrator: ... nope ...)

One thing we can try is to measure the scrollbar width, and if you
happen to click near the edge then we ignore this click. You can think
of it like `let safeArea = viewportWidth - scrollBarWidth`. Everything
works great now! Maybe...

Well, let me tell you about macOS and "floating" scrollbars... you can't
measure those... AAAAAAAARGHHHH

Alright, scratch that, let's add an invisible 20px gap all around the
viewport without measuring as a safe area. Nobody will click in the 20px
gap, right, right?! Everything works great now! Maybe...

Mobile devices, yep, Dialogs are used there as well and usually there is
not a lot of room around those Dialogs so you almost always hit the
"safe area". Should we now try and detect the device people are
using...?

/me takes a deep breath...

Inhales... Exhales...

Alright, time to start thinking again... The outside click with a
"simple" click worked on Menu and Listbox not on the Dialog so this
should be enough right?

WAIT A MINUTE

Remember this piece of code from earlier:

```js
onClick(event) {
  event.stopPropagation()
}
```

The click event never ever reaches the `window` so we can't detect the
click outside...

Let's move that code to the `Dialog.Panel` instead of on the `Dialog`
itself, this will make sure that we stop the click event from leaking
if you happen to nest a Dialog in a form and have a submitable
button/input in the `Dialog.Panel`. But if you click outside of the
`Dialog.Panel` the "click" event will bubble to the `window` so that we
can detect a click and check whether it was outside or not.

Time to start cleaning:
  - ☑️ Remove all the scrollbar measuring code...
    - Closing works on mobile now, no more safe area hack
  - ☑️ Remove the pointerdown & mousedown event
    - Outside click doesn't fire twice anymore
  - ☑️ Use a "simple" click event listener
    - We can click the scrollbar and the browser ignores it for us

All issues have been fixed! (Until the next one of course...)

* ensure a `Dialog.Panel` exists

* cleanup unnecessary code

* use capture phase for outside click behaviour

* further improve outside click

We added event.preventDefault() & event.defaultPrevented checks to make
sure that we only handle 1 layer at a time.

E.g.:

```js
<Dialog>
  <Menu>
    <Menu.Button>Button</Menu.Button>
    <Menu.Items>...</Menu.Items>
  </Menu>
</Dialog>
```

If you open the Dialog, then open the Menu, pressing `Escape` will close
the Menu but not the Dialog, pressing `Escape` again will close the
Dialog.

Now this is also applied to the outside click behaviour.
If you open the Dialog, then open the Menu, clicking outside will close
the Menu but not the Dialog, outside again will close the Dialog.

* add explicit `enabled` value to the `useOutsideClick` hook

* ensure outside click properly works with Poratl components

Usually this works out of the box, however our Portal components will
render inside the Dialog component "root" to ensure that it is inside
the non-inert tree and is inside the Dialog visually.

This means that the Portal is not in a separate container and
technically outside of the `Dialog.Panel` which means that it will close
when you click on a non-interactive item inside that Portal...

This fixes that and allows all Portal components.

* update changelog
2022-06-03 16:20:56 +02:00

20 KiB
Raw Blame History

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

Unreleased

Added

  • Add by prop for Listbox, Combobox and RadioGroup (#1482)
  • Add @headlessui/tailwindcss plugin (#1487)

Fixed

  • Fix incorrect transitionend/transitioncancel events for the Transition component (#1537)
  • Improve outside click of Dialog component (#1546)

1.6.4 - 2022-05-29

Fixed

  • Ensure Escape propagates correctly in Combobox component (#1511)
  • Remove leftover code in Combobox component (#1514)
  • Fix event handlers with arity > 1 (#1515)
  • Fix transition enter bug (#1519)
  • Fix render prop data in RadioGroup component (#1522)

1.6.3 - 2022-05-25

Fixed

  • Allow to override the type on the Combobox.Input (#1476)
  • Ensure the the <Popover.Panel focus> closes correctly (#1477)
  • Only render the FocusSentinel if required in the Tabs component (#1493)
  • Ensure the Transition stops once DOM Nodes are hidden (#1500)

1.6.2 - 2022-05-19

Fixed

  • Fix closing of Popover.Panel in React 18 (#1409)
  • Ignore Escape when event got prevented in Dialog component (#1424)
  • Improve FocusTrap behaviour (#1432)
  • Simplify Popover Tab logic by using sentinel nodes instead of keydown event interception (#1440)
  • Ensure the Popover.Panel is clickable without closing the Popover (#1443)
  • Improve "Scroll lock" scrollbar width for Dialog component (#1457)
  • Make the ref optional in the Popover component (#1465)
  • Ensure the ref is forwarded on the Transition.Child component (#1473)

1.6.1 - 2022-05-03

Fixed

  • Fix hydration issue with Tab component (#1393)

1.6.0 - 2022-04-25

Fixed

  • Ensure that you can add the ref prop to all components (#1116)
  • Ensure links are triggered inside Popover.Panel components (#1153)
  • Improve SSR for Tab component (#1155)
  • Fix hover scroll issue in Listbox, Combobox and Menu components (#1161)
  • Guarantee DOM sort order when performing Listbox, Combobox and Menu actions (#1168)
  • Fix <Transition> flickering issue (#1118)
  • Improve outside click support (#1175)
  • Ensure that appear prop on the <Transition> component works regardless of multiple rerenders (#1179)
  • Reset Combobox.Input when the value gets reset (#1181)
  • Fix double beforeEnter callback on the <Transition> component caused by SSR (#1183)
  • Adjust active item/option index on Listbox, Combobox and Menu components (#1184)
  • Only activate the Tab on mouseup (#1192)
  • Ignore "outside click" on removed elements (#1193)
  • Remove focus() from Listbox.Option (#1218)
  • Improve some internal code (#1221)
  • Use ownerDocument instead of document (#1158)
  • Ensure focus trapping plays well with the Tab and Dialog components (#1231)
  • Improve syncing of Combobox.Input value (#1248)
  • Fix tree-shaking support (#1247)
  • Stop propagation on the Popover.Button (#1263)
  • Fix incorrect active option in the Listbox and Combobox components (#1264)
  • Properly merge incoming props (#1265)
  • Fix incorrect closing while interacting with third party libraries in Dialog component (#1268)
  • Mimic browser select on focus when navigating the Tab component (#1272)
  • Ensure that there is always an active option in the Combobox (#1279, #1281)
  • Support classic form submissions in RadioGroup, Switch and Combobox components (#1285)
  • Add React 18 compatibility (#1326)
  • Fix open/closed state issue in Dialog (#1360)

Added

  • Add classic form submission compatibility via new hidden inputs (#1214)
  • Add multiple value support to Listbox and Combobox components (#1243, #1355)
  • Add support for clearing the value of a Combobox (#1295)
  • Add Dialog.Backdrop and Dialog.Panel components (#1333)

1.5.0 - 2022-02-17

Fixed

  • Ensure correct order when conditionally rendering Menu.Item, Listbox.Option and RadioGroup.Option (#1045)
  • Improve controlled Tabs behaviour (#1050)
  • Improve typeahead search logic (#1051)
  • Improve overal codebase, use modern tech like esbuild and TypeScript 4! (#1055)
  • Improve build files (#1078)
  • Ensure typeahead stays on same item if it still matches (#1098)
  • Fix off-by-one frame issue causing flicker (#1111)
  • Trigger scrollIntoView effect when position changes (#1113)

Added

1.4.3 - 2022-01-14

Fixes

  • Ensure portal root exists in the DOM (#950)
  • Ensure correct DOM node order when performing focus actions (#1038)

Added

  • Allow for Tab.Group to be controllable (#909, #970)

1.4.2 - 2021-11-08

Fixes

  • Stop the event from propagating in the Popover component (#798)
  • Allow clicking on elements inside a Dialog.Overlay (#816)
  • Ensure interactability with Popover.Panel contents when using the static prop (#857)
  • Fix initial transition in Transition component (#882)

1.4.1 - 2021-08-30

Fixes

  • Only add type=button to real buttons (#709)
  • Fix escape bug not closing Dialog after clicking in Dialog (#754)
  • Use console.warn instead of throwing an error when there are no focusable elements (#775)

1.4.0 - 2021-07-29

Added

  • Add new Tabs component (#674, #698)
  • Make Disclosure.Button close the disclosure inside a Disclosure.Panel (#682)
  • Add aria-orientation to Listbox, which swaps Up/Down with Left/Right keys (#683)
  • Expose close function from the render prop for Disclosure, Disclosure.Panel, Popover and Popover.Panel (#697)

1.3.0 - 2021-06-21

Added

  • Ensure that you can use Transition.Child when using implicit Transitions (#503)
  • Add new entered prop for Transition and Transition.Child components (#504)

Fixes

  • Add aria-disabled on disabled RadioGroup.Option components (#543)
  • Improve disabled and tabindex prop handling (#512)
  • Improve React peer dependency version range (#544)
  • Improve types for the open prop in the Dialog component (#550)
  • Improve aria-expanded logic (#592)
  • Remove undocumented :className prop (#607)
  • Improve types for Listbox component (#576)
  • Remove explicit :class prop (#608)
  • Improve tree shaking (#602)
  • Improve peer dependencies for react-dom, and for the future version 18 (#622)

1.2.0 - 2021-05-10

Added

  • Introduce Open/Closed state, to simplify component communication (#466)

Fixes

  • Improve SSR for Dialog (#477)
  • Delay focus trap initialization (#477)
  • Improve incorrect behaviour for nesting Dialog components (#560)

1.1.1 - 2021-04-28

Fixes

  • Fix form submission within Dialog (#460)

1.1.0 - 2021-04-26

Fixes

  • Improve search, make searching case insensitive (#385)
  • Fix unreachable RadioGroup (#401)
  • Fix closing nested Dialog components when pressing Escape (#430)

Added

  • Add disabled prop to RadioGroup and RadioGroup.Option (#401)
  • Add defaultOpen prop to the Disclosure component (#447)

1.0.0 - 2021-04-14

Fixes

  • Fixed outside click not re-focusing the Menu.Button (#220, #256)
  • Fixed outside click not re-focusing the Listbox.Button (#220, #256)
  • Force focus in Menu.Items and Listbox.Options from within the component itself (#261)
  • Stop propagating keyboard/mouse events (#261)

Added

  • Add Disclosure, Disclosure.Button and Disclosure.Panel components (#220)
  • Add Dialog, Dialog.Overlay, Dialog.Tile and Dialog.Description components (#220)
  • Add Portal and Portal.Group component (#220)
  • Add Switch.Description component, which adds the aria-describedby to the actual Switch (#220)
  • Add FocusTrap component (#220)
  • Add Popover, Popover.Button, Popover.Overlay, Popover.Panel and Popover.Group components (#220)
  • All components that accept a className, can now also receive a function with the renderProp argument (#257)
  • Add RadioGroup, RadioGroup.Option, RadioGroup.Label and RadioGroup.Description components (#274)

0.3.2 - 2021-04-02

Fixes

  • Fix incorrect type error unique symbol (#248, #240)

0.3.1 - 2021-02-11

Fixes

  • Fix incorrect types path (d557d50)
  • Fix TypeScript render related types (bb68793)

0.3.0 - 2021-02-06

Fixes

  • Ensure that you can't use Enter to invoke the Switch
  • Fix outside click refocus bug (#114)
  • Prevent scrolling when refocusing items
  • Ensure Switch has type="button" (#192)
  • Fix useId() hook returning undefined on the client
  • Fix disabled not working when inside a disabled fieldset (#202)
  • Trigger "outside click" behaviour on mousedown (#212)
  • Ensure the active MenuItem is scrolled into view
  • Ensure valid Menu accessibility tree (#228)

Added

  • Add Transition events (beforeEnter, afterEnter, beforeLeave and afterLeave) (#57)
  • Add render features + render strategy (static and unmount={true | false}) (#106)
  • Add displayName to all contexts (#175)
  • Add disabled prop to Listbox itself, instead of the Listbox.Button (#229)

Changes

  • Changes the API of the Transition component.
    • We will now always render a div by default (unless you change this using the as={...} prop).
    • The render function prop doesn't expose a ref anymore.
    • Adds unmount prop to the Transition and Transition.Child components.

0.2.0 - 2020-10-06

Added

  • Add Listbox component
  • Add Switch component

0.1.3 - 2020-09-29

Fixes

  • Fix outside click behaviour. If you had multiple menu's, when menu 1 is open, menu 2 is closed and you click on menu button 2 it will open both menu's. This is now fixed.
  • Ensure when using keyboard navigation we prevent the default behaviour.

0.1.2 - 2020-09-25

Added

  • Add tests for onClick handling that wasn't working properly in @headlessui/vue to ensure behavior stays the same in this library

Fixes

  • Don't pass disabled prop through to children, only add aria-disabled

0.1.1 - 2020-09-24

Added

  • Everything!
Reference in New Issue View Git Blame Copy Permalink