00fdb7e3cd
* simplify `isComposing` We had an issue #2409 where typing using an IME (Input Method Editor, E.g.: Japanese — Romaji) already submitted characters while the user was still composing the characters together. 1. Type `wa` 2. Expected result: `わ` 3. Actual result: `wあ` (where `あ` is the character `a`) This was solved by not triggering change events at all until the `compositionend` event was triggered. This worked fine for this use case. However this also meant that only at the end of your typing session (when you press `enter`/`space`) the actual value was submitted. Fast forward to today, we received a new issue #2575 where this behaviour completely broke on Android devices. Android _always_ use the IME APIs for handling input... if we think about our solution form above, it also means that while you are typing on an Android device no options are being filtered at all. The moment you hit enter/space the combobox will open and results will be filtered. This is where this fix comes in. The goals are simple: 1. Make it work 2. Try to make the current code simpler I started digging to see _why_ this `wあ` was even submitted. A normal input field doesn't do that?! We have some code that does the following things: 1. Sync the selected value with the `input` such that if you update the value from the outside, then the value in the `input` is up-to-date with the `displayValue` of that incoming value. 2. A fix for macOS VoiceOver to improve the VoiceOver experience when opening the `Combobox` component. This is done by manually resetting the value of the `input` field. 1. Keep track of the current value 2. Keep track of the current selection range (start/end) state 3. Reset the input to an empty string `''` 4. Restore the value to the captured value 5. Restore the selection range When you are typing, the input field doesn't have to update yet because typing doesn't cause an option to become the `selected` option, therefore it doesn't have to sync the value yet. So (1.) isn't the issue here. However, when you start typing, the Combobox should open and then we trigger the macOS VoiceOver fix. This is touching the `input` field because we change the value & selection. Because we touched the `input` while the user was still in a composing mode, it bailed and submitted whatever characters it had. This is the part that we don't want. Not applying the macOS VoiceOver fix while typing solves this issue. In addition, because _we_ are touching the input field, VoiceOver is acting normally. In hindsight, the solution is very simple: do not touch the input field when the user is typing. We still keep track whether the user `isComposing` so that we can bail on the default `Enter` behaviour (marking the current option as the selected option) because pressing `Enter` while composing should get out of the IME. Fixes: #2575 * update changelog
37 KiB
37 KiB
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
Fixed
- Ensure the caret is in a consistent position when syncing the
Combobox.Inputvalue (#2568) - Improve "outside click" behaviour in combination with 3rd party libraries (#2572)
- Ensure IME works on Android devices (#2580)
1.7.15 - 2023-06-01
Added
- [internal] add demo mode to
MenuandPopovercomponents (#2448)
Fixed
- Ensure
FocusTrapis only active when the givenenabledvalue istrue(#2456) - Stop
<Transition appear>from overwriting classes on re-render (#2457) - Improve control over
MenuandListboxoptions while searching (#2471) - Consider clicks inside iframes to be "outside" (#2485)
- Ensure moving focus within a
Portalcomponent, does not close thePopovercomponent (#2492)
Changed
- Move
typescondition to the front (#2469)
1.7.14 - 2023-04-12
Fixed
- Fix focus styles showing up when using the mouse (#2347)
- Fix "Can't perform a React state update on an unmounted component." when using the
Transitioncomponent (#2374) - Add
FocusTrapevent listeners once document has loaded (#2389) - Fix
classNamehydration for<Transition appear>(#2390) - Improve
Comboboxtypes to improve false positives (#2411) - Merge
classNamecorrectly when it’s a function (#2412) - Correctly handle IME composition in
<Combobox.Input>(#2426)
Added
- Add
formprop to form-like components such asRadioGroup,Switch,Listbox, andCombobox(#2356)
1.7.13 - 2023-03-03
Fixed
- Ensure
Transitioncomponent completes if nothing is transitioning (#2318) - Enable native label behavior for
<Switch>where possible (#2265) - Allow root containers from the
Dialogcomponent in theFocusTrapcomponent (#2322) - Fix
XYZPropsWeControland cleanup internal TypeScript types (#2329) - Fix invalid warning when using multiple
Popover.Buttoncomponents inside aPopover.Panel(#2333) - Fix restore focus to buttons in Safari, when
Dialogcomponent closes (#2326)
1.7.12 - 2023-02-24
Added
- Add explicit props types for every component (#2282)
Fixed
- Ensure the main tree and parent
Dialogcomponents are marked asinert(#2290) - Fix nested
Popovercomponents not opening (#2293) - Make React types more compatible with other libraries (#2282)
- Fix
Dialogcleanup when theDialogbecomes hidden (#2303)
1.7.11 - 2023-02-15
Fixed
- Ensure we handle
nullvalues for thedataRefcorrectly (#2258) - Move
aria-multiselectableto[role=listbox]in theComboboxcomponent (#2271) - Re-focus
Combobox.Inputwhen aCombobox.Optionis selected (#2272) - Ensure we reset the
activeOptionIndexif the active option is unmounted (#2274) - Improve
Reftype for forwardedSwitch's ref (#2277) - Start cleanup phase of the
Dialogcomponent when going into theClosingstate (#2264)
1.7.10 - 2023-02-06
Fixed
- Revert "Use the
import * as React from 'react'pattern (#2242)
1.7.9 - 2023-02-03
Fixed
- Fix SSR tab hydration when using Strict Mode in development (#2231)
- Don't break overflow when multiple dialogs are open at the same time (#2215)
- Fix "This
Suspenseboundary received an update before it finished hydrating" error in theDisclosurecomponent (#2238) - Use the
import * as React from 'react'pattern (#2242)
1.7.8 - 2023-01-27
Fixed
- Fix SSR tab rendering on React 17 (#2102)
- Fix arrow key handling in
Tab(after DOM order changes) (#2145) - Fix false positive warning about using multiple
<Popover.Button>components (#2146) - Fix
Tabkey with non focusable elements inPopover.Panel(#2147) - Fix false positive warning when using
<Popover.Button />in React 17 (#2163) - Fix
failed to removeChild on Nodebug (#2164) - Don’t overwrite classes during SSR when rendering fragments (#2173)
- Improve
Comboboxaccessibility (#2153) - Fix crash when reading
headlessuiFocusGuardofrelatedTargetin theFocusTrapcomponent (#2203) - Fix
FocusTrapinDialogwhen there is only 1 focusable element (#2172) - Improve
Tabswrapping around when controlling the component and overflowing theselectedIndex(#2213) - Fix
shadow-rootbug closingDialogcontainers (#2217)
Added
- Allow setting
tabIndexon theTab.Panel(#2214)
1.7.7 - 2022-12-16
Fixed
- Improve scroll restoration after
Dialogcloses (b20e48dd)
1.7.6 - 2022-12-15
Fixed
- Fix regression where
displayValuecrashes (#2087) - Fix
displayValuesyncing whenCombobox.Inputis unmounted and re-mounted in different trees (#2090) - Fix FocusTrap escape due to strange tabindex values (#2093)
- Improve scroll locking on iOS (#2100, 28234b0e)
1.7.5 - 2022-12-08
Fixed
- Reset form-like components when the parent
<form>resets (#2004) - Add warning when using
<Popover.Button />multiple times (#2007) - Ensure Popover doesn't crash when
focusis going towindow(#2019) - Ensure
shift+homeandshift+endworks as expected in theCombobox.Inputcomponent (#2024) - Improve syncing of the
Combobox.Inputvalue (#2042) - Fix crash when using
multiplemode withoutvalueprop (uncontrolled) forListboxandComboboxcomponents (#2058) - Apply
enterandenterFromclasses in SSR forTransitioncomponent (#2059) - Allow passing in your own
idprop (#2060) - Fix
Dialogunmounting problem due to incorrecttransitioncancelevent in theTransitioncomponent on Android (#2071) - Ignore pointer events in Listbox, Menu, and Combobox when cursor hasn't moved (#2069)
- Allow clicks inside dialog panel when target is inside shadow root (#2079)
1.7.4 - 2022-11-03
Fixed
- Fix
<Popover.Button as={Fragment} />crash (#1889) - Expose
closefunction forMenuandMenu.Itemcomponents (#1897) - Fix
useOutsideClick, add improvements for ShadowDOM (#1914) - Fire
<Combobox.Input>'sonChangehandler when changing the value internally (#1916) - Add
client-onlyto mark everything as client components (#1981)
Added
- Warn when changing components between controlled and uncontrolled (#1878)
1.7.3 - 2022-09-30
Fixed
- Improve
Portaldetection forPopovercomponents (#1842) - Fix
useOutsideClickswallowing events inside ShadowDOM (#1876) - Fix
Tabincorrectly activating onfocusevent (#1887)
1.7.2 - 2022-09-15
Fixed
- Prevent option selection in
Combobox.Inputwhile composing (#1850) - Ensure we handle the
staticprop inTab.Panelcomponents correctly (#1856)
1.7.1 - 2022-09-12
Fixed
- Improve iOS scroll locking (#1830)
- Add
<fieldset disabled>check to radio group options in React (#1835) - Ensure
Taborder stays consistent, and the currently activeTabstays active (#1837) - Ensure
Combobox.Labelis properly linked when rendered afterCombobox.ButtonandCombobox.Inputcomponents (#1838) - Remove
forceRerenderfromTabcomponent (#1846)
1.7.0 - 2022-09-06
Added
- Add
byprop forListbox,ComboboxandRadioGroup(#1482, #1717, #1814, #1815) - Make form components uncontrollable (#1683)
- Add
@headlessui/tailwindcssplugin (#1487)
Fixed
- Fixed SSR support on Deno (#1671)
- Don’t close dialog when opened during mouse up event (#1667)
- Don’t close dialog when drag ends outside dialog (#1667)
- Fix outside clicks to close dialog when nested, unopened dialogs are present (#1667)
- Close
Menucomponent when usingtabkey (#1673) - Resync input when display value changes (#1679, #1755)
- Ensure controlled
Tabsdon't change automagically (#1680) - Don't scroll lock when a Transition + Dialog is mounted but hidden (#1681)
- Allow
Popovercloseto be passed directly toonClickhandlers (#1696) - Improve outside click on Safari iOS (#1712)
- Improve event handler merging (#1715)
- Fix incorrect scrolling to the bottom when opening a
Dialog(#1716) - Improve
Comboboxre-opening keyboard issue on mobile (#1732) - Ensure
Disclosure.Panelis properly linked (#1747) - Only select the active option when using "singular" mode when pressing
<tab>in theComboboxcomponent (#1750) - Improve the types of the
Comboboxcomponent (#1761) - Only restore focus to the
Menu.Buttonif necessary when activating aMenu.Option(#1782) - Don't scroll when wrapping around in focus trap (#1789)
- Fix
Transitioncomponent's incorrect cleanup and order of events (#1803) - Ensure enter transitions work when using
unmount={false}(#1811) - Improve accessibility when announcing
Listbox.OptionandCombobox.Optioncomponents (#1812) - Fix
refstealing from children (#1820) - Expose the
valuefrom theComboboxandListboxcomponents render prop (#1822) - Improve
scroll lockon iOS (#1824) - Fix maximum call stack size exceeded error on
Tabcomponent when usingas={Fragment}(#1826) - Fix "blank" screen on initial load of
Transitioncomponent (#1823)
1.6.6 - 2022-07-07
Fixed
- Ensure
CMD+Backspaceworks in nullable mode forComboboxcomponent (#1617)
1.6.5 - 2022-06-20
Fixed
- Fix incorrect transitionend/transitioncancel events for the Transition component (#1537)
- Improve outside click of
Dialogcomponent (#1546) - Detect outside clicks from within
<iframe>elements (#1552) - Improve Combobox input cursor position (#1574)
- Fix scrolling issue in
Tabcomponent when using arrow keys (#1584)
1.6.4 - 2022-05-29
Fixed
- Ensure
Escapepropagates correctly inComboboxcomponent (#1511) - Remove leftover code in Combobox component (#1514)
- Fix event handlers with arity > 1 (#1515)
- Fix transition
enterbug (#1519) - Fix render prop data in
RadioGroupcomponent (#1522)
1.6.3 - 2022-05-25
Fixed
- Allow to override the
typeon theCombobox.Input(#1476) - Ensure the the
<Popover.Panel focus>closes correctly (#1477) - Only render the
FocusSentinelif required in theTabscomponent (#1493) - Ensure the Transition stops once DOM Nodes are hidden (#1500)
1.6.2 - 2022-05-19
Fixed
- Fix closing of
Popover.Panelin React 18 (#1409) - Ignore
Escapewhen event got prevented inDialogcomponent (#1424) - Improve
FocusTrapbehaviour (#1432) - Simplify
PopoverTab logic by using sentinel nodes instead of keydown event interception (#1440) - Ensure the
Popover.Panelis clickable without closing thePopover(#1443) - Improve "Scroll lock" scrollbar width for
Dialogcomponent (#1457) - Make the
refoptional in thePopovercomponent (#1465) - Ensure the
refis forwarded on theTransition.Childcomponent (#1473)
1.6.1 - 2022-05-03
Fixed
- Fix hydration issue with
Tabcomponent (#1393)
1.6.0 - 2022-04-25
Fixed
- Ensure that you can add the
refprop to all components (#1116) - Ensure links are triggered inside
Popover.Panelcomponents (#1153) - Improve SSR for
Tabcomponent (#1155) - Fix
hoverscroll issue inListbox,ComboboxandMenucomponents (#1161) - Guarantee DOM sort order when performing
Listbox,ComboboxandMenuactions (#1168) - Fix
<Transition>flickering issue (#1118) - Improve outside click support (#1175)
- Ensure that
appearprop on the<Transition>component works regardless of multiple rerenders (#1179) - Reset
Combobox.Inputwhen the value gets reset (#1181) - Fix double
beforeEntercallback on the<Transition>component caused by SSR (#1183) - Adjust active
item/optionindex onListbox,ComboboxandMenucomponents (#1184) - Only activate the
Tabon mouseup (#1192) - Ignore "outside click" on removed elements (#1193)
- Remove
focus()fromListbox.Option(#1218) - Improve some internal code (#1221)
- Use
ownerDocumentinstead ofdocument(#1158) - Ensure focus trapping plays well with the
TabandDialogcomponents (#1231) - Improve syncing of
Combobox.Inputvalue (#1248) - Fix tree-shaking support (#1247)
- Stop propagation on the
Popover.Button(#1263) - Fix incorrect
activeoption in theListboxandComboboxcomponents (#1264) - Properly merge incoming props (#1265)
- Fix incorrect closing while interacting with third party libraries in
Dialogcomponent (#1268) - Mimic browser select on focus when navigating the
Tabcomponent (#1272) - Ensure that there is always an active option in the
Combobox(#1279, #1281) - Support classic form submissions in
RadioGroup,SwitchandComboboxcomponents (#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
ListboxandComboboxcomponents (#1243, #1355) - Add support for clearing the value of a
Combobox(#1295) - Add
Dialog.BackdropandDialog.Panelcomponents (#1333)
1.5.0 - 2022-02-17
Fixed
- Ensure correct order when conditionally rendering
Menu.Item,Listbox.OptionandRadioGroup.Option(#1045) - Improve controlled Tabs behaviour (#1050)
- Improve typeahead search logic (#1051)
- Improve overal codebase, use modern tech like
esbuildand 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
1.4.2 - 2021-11-08
Fixes
- Stop the event from propagating in the
Popovercomponent (#798) - Allow clicking on elements inside a
Dialog.Overlay(#816) - Ensure interactability with
Popover.Panelcontents when using thestaticprop (#857) - Fix initial transition in
Transitioncomponent (#882)
1.4.1 - 2021-08-30
Fixes
- Only add
type=buttonto real buttons (#709) - Fix
escapebug not closing Dialog after clicking in Dialog (#754) - Use
console.warninstead of throwing an error when there are no focusable elements (#775)
1.4.0 - 2021-07-29
Added
- Add new
Tabscomponent (#674, #698) - Make
Disclosure.Buttonclose the disclosure inside aDisclosure.Panel(#682) - Add
aria-orientationtoListbox, which swaps Up/Down with Left/Right keys (#683) - Expose
closefunction from the render prop forDisclosure,Disclosure.Panel,PopoverandPopover.Panel(#697)
1.3.0 - 2021-06-21
Added
- Ensure that you can use
Transition.Childwhen using implicit Transitions (#503) - Add new
enteredprop forTransitionandTransition.Childcomponents (#504)
Fixes
- Add
aria-disabledon disabledRadioGroup.Optioncomponents (#543) - Improve
disabledandtabindexprop handling (#512) - Improve React peer dependency version range (#544)
- Improve types for the
openprop in theDialogcomponent (#550) - Improve
aria-expandedlogic (#592) - Remove undocumented
:classNameprop (#607) - Improve types for
Listboxcomponent (#576) - Remove explicit
:classprop (#608) - Improve tree shaking (#602)
- Improve peer dependencies for
react-dom, and for the future version18(#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
Dialogcomponents (#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
Dialogcomponents when pressingEscape(#430)
Added
- Add
disabledprop toRadioGroupandRadioGroup.Option(#401) - Add
defaultOpenprop to theDisclosurecomponent (#447)
1.0.0 - 2021-04-14
Fixes
- Fixed
outside clicknot re-focusing theMenu.Button(#220, #256) - Fixed
outside clicknot re-focusing theListbox.Button(#220, #256) - Force focus in
Menu.ItemsandListbox.Optionsfrom within the component itself (#261) - Stop propagating keyboard/mouse events (#261)
Added
- Add
Disclosure,Disclosure.ButtonandDisclosure.Panelcomponents (#220) - Add
Dialog,Dialog.Overlay,Dialog.TileandDialog.Descriptioncomponents (#220) - Add
PortalandPortal.Groupcomponent (#220) - Add
Switch.Descriptioncomponent, which adds thearia-describedbyto the actual Switch (#220) - Add
FocusTrapcomponent (#220) - Add
Popover,Popover.Button,Popover.Overlay,Popover.PanelandPopover.Groupcomponents (#220) - All components that accept a
className, can now also receive a function with the renderProp argument (#257) - Add
RadioGroup,RadioGroup.Option,RadioGroup.LabelandRadioGroup.Descriptioncomponents (#274)
0.3.2 - 2021-04-02
Fixes
0.3.1 - 2021-02-11
Fixes
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
Switchhastype="button"(#192) - Fix
useId()hook returningundefinedon the client - Fix
disablednot working when inside a disabled fieldset (#202) - Trigger "outside click" behaviour on mousedown (#212)
- Ensure the
activeMenuItem is scrolled into view - Ensure valid Menu accessibility tree (#228)
Added
- Add Transition events (
beforeEnter,afterEnter,beforeLeaveandafterLeave) (#57) - Add render features + render strategy (
staticandunmount={true | false}) (#106) - Add displayName to all contexts (#175)
- Add
disabledprop toListboxitself, instead of theListbox.Button(#229)
Changes
- Changes the API of the Transition component.
- We will now always render a
divby default (unless you change this using theas={...}prop). - The render function prop doesn't expose a
refanymore. - Adds
unmountprop to theTransitionandTransition.Childcomponents.
- We will now always render a
0.2.0 - 2020-10-06
Added
- Add
Listboxcomponent - Add
Switchcomponent
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
onClickhandling that wasn't working properly in @headlessui/vue to ensure behavior stays the same in this library
Fixes
- Don't pass
disabledprop through to children, only addaria-disabled
0.1.1 - 2020-09-24
Added
- Everything!