4da0b3aba9
* make combobox playgrounds in React and Vue similar
* syncing of the input should happen when the value changes internally or externally
I also got rid of the manually dispatching of the change event if the
value changes from internally.
I think the correct mental model is:
- That the `Combobox.Input` value should change if the selected value
changes from the outside or from the inside.
- Note: It should _not_ do that if you are currently typing (once you
choose a new value it will re-sync, once you reset (escape / outside
click) it will also sync again).
- The `onChange`/`onInput` of the `Combobox.Input` itself should only be
called if you as the user type something. Not when the value is
"synced" based on the selected value. We were currently manually
dispatching events which works (to a certain extend) but smelled a bit
fishy to me.
The manual dispatching of events tried to solve an issue
(https://github.com/tailwindlabs/headlessui/issues/1875), but I think
this can be solved in 2 other ways that make a bit more sense:
1. (Today) Use the `onBlur` on the input to reset the `query` value to filter
options.
2. (In the future) Use an exposed `onClose` (or similar) event to reset
your `query` value.
* update changelog
* ignore flakey test
27 KiB
27 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
- 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)
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!