huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
00fdb7e3cd46486cdf4a9d445fb98ea1fd8b5d2f
headlessui/packages/@headlessui-vue/CHANGELOG.md
T
Robin Malfait 00fdb7e3cd Ensure IME works on Android devices (#2580) 
* 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
2023-07-06 14:35:35 +02:00

33 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

Fixed

  • Ensure the caret is in a consistent position when syncing the Combobox.Input value (#2568)
  • Improve "outside click" behaviour in combination with 3rd party libraries (#2572)
  • Improve performance of Combobox component (#2574)
  • Ensure IME works on Android devices (#2580)

1.7.14 - 2023-06-01

Fixed

  • Fix memory leak in Popover component (#2430)
  • Ensure FocusTrap is only active when the given enabled value is true (#2456)
  • Ensure the exposed activeIndex is up to date for the Combobox component (#2463)
  • Improve control over Menu and Listbox options while searching (#2471)
  • Consider clicks inside iframes to be "outside" (#2485)
  • Ensure moving focus within a Portal component, does not close the Popover component (#2492)

Changed

  • Move types condition to the front (#2469)

1.7.13 - 2023-04-12

Fixed

  • Fix focus styles showing up when using the mouse (#2347)
  • Disable ComboboxInput when its Combobox is disabled (#2375)
  • Add FocusTrap event listeners once document has loaded (#2389)
  • Don't scroll-lock <Dialog> when wrapping transition isn't showing (#2422)
  • Ensure DOM ref is properly handled in the RadioGroup component (#2424)
  • Correctly handle IME composition in <Combobox.Input> (#2426)

Added

  • Add form prop to form-like components such as RadioGroup, Switch, Listbox, and Combobox (#2356)

1.7.12 - 2023-03-03

Fixed

  • Enable native label behavior for <Switch> where possible (#2265)
  • Allow root containers from the Dialog component in the FocusTrap component (#2322)
  • Cleanup internal TypeScript types (#2329)
  • Fix restore focus to buttons in Safari, when Dialog component closes (#2326)
  • Ensure hooks in the FocusTrap component only apply when mounted (#2331)

1.7.11 - 2023-02-24

Fixed

  • Ensure the main tree and parent Dialog components are marked as inert (#2290)
  • Fix nested Popover components not opening (#2293)
  • Fix change event incorrectly getting called on blur (#2296)
  • Fix Dialog cleanup when the Dialog becomes hidden (#2303)

1.7.10 - 2023-02-15

Fixed

  • Don’t fire afterLeave event more than once for a given transition (#2267)
  • Move aria-multiselectable to [role=listbox] in the Combobox component (#2271)
  • Re-focus Combobox.Input when a Combobox.Option is selected (#2272)
  • Ensure we reset the activeOptionIndex if the active option is unmounted (#2274)
  • Start cleanup phase of the Dialog component when going into the Closing state (#2264)

1.7.9 - 2023-02-03

Fixed

  • Don't break overflow when multiple dialogs are open at the same time (#2215)

1.7.8 - 2023-01-27

Changed

  • Adjust SSR detection mechanism (#2102)

Fixed

  • Ensure disabled="false" is not incorrectly passed to the underlying DOM Node (#2138)
  • Fix arrow key handling in Tab (after DOM order changes) (#2145)
  • Fix Tab key with non focusable elements in Popover.Panel (#2147)
  • Don’t overwrite classes during SSR when rendering fragments (#2173)
  • Improve Combobox accessibility (#2153)
  • Fix crash when reading headlessuiFocusGuard of relatedTarget in the FocusTrap component (#2203)
  • Fix FocusTrap in Dialog when there is only 1 focusable element (#2172)
  • Improve Tabs wrapping around when controlling the component and overflowing the selectedIndex (#2213)
  • Fix shadow-root bug closing Dialog containers (#2217)

Added

  • Allow setting tabIndex on the Tab.Panel (#2214)

1.7.7 - 2022-12-16

Fixed

  • Improve scroll restoration after Dialog closes (b20e48dd)

1.7.6 - 2022-12-15

Fixed

  • Fix regression where displayValue crashes (#2087)
  • Fix displayValue syncing when Combobox.Input is 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)
  • Ensure Popover doesn't crash when focus is going to window (#2019)
  • Ensure shift+home and shift+end works as expected in the ComboboxInput component (#2024)
  • Improve syncing of the ComboboxInput value (#2042)
  • Fix crash when using multiple mode without value prop (uncontrolled) for Listbox and Combobox components (#2058)
  • Allow passing in your own id prop (#2060)
  • Add null as a valid type for Listbox and Combobox in Vue (#2064, #2067)
  • Improve SSR for Tabs in Vue (#2068)
  • 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

  • Expose close function for Menu and MenuItem components (#1897)
  • Fix useOutsideClick, add improvements for ShadowDOM (#1914)
  • Prevent default slot warning when using a component for as prop (#1915)
  • Fire <ComboboxInput>'s @change handler when changing the value internally (#1916)

1.7.3 - 2022-09-30

Fixed

  • Call displayValue with a v-model of ref(undefined) on ComboboxInput (#1865)
  • Improve Portal detection for Popover components (#1842)
  • Fix crash when children are undefined (#1885)
  • Fix useOutsideClick swallowing events inside ShadowDOM (#1876)
  • Fix Tab incorrectly activating on focus event (#1887)

1.7.2 - 2022-09-15

Fixed

  • Prevent option selection in ComboboxInput while composing (#1850)
  • Ensure we handle the static prop in TabPanel components correctly (#1856)

1.7.1 - 2022-09-12

Fixed

  • Improve iOS scroll locking (#1830)
  • Ensure Tab order stays consistent, and the currently active Tab stays active (#1837)

1.7.0 - 2022-09-06

Added

  • Add by prop for Listbox, Combobox and RadioGroup (#1482, #1717, #1814, #1815)
  • Make form components uncontrollable (#1683)
  • Add @headlessui/tailwindcss plugin (#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 Menu component when using tab key (#1673)
  • Resync input when display value changes (#1679, #1755)
  • Ensure controlled Tabs don't change automagically (#1680)
  • Improve outside click on Safari iOS (#1712)
  • Improve event handler merging (#1715)
  • Fix incorrect scrolling to the bottom when opening a Dialog (#1716)
  • Don't overwrite element.focus() on <PopoverPanel> (#1719)
  • Improve Combobox re-opening keyboard issue on mobile (#1732)
  • Only select the active option when using "singular" mode when pressing <tab> in the Combobox component (#1750)
  • Only restore focus to the MenuButton if necessary when activating a MenuOption (#1782)
  • Don't scroll when wrapping around in focus trap (#1789)
  • Improve accessibility when announcing ListboxOption and ComboboxOption components (#1812)
  • Expose the value from the Combobox and Listbox components slot (#1822)
  • Improve scroll lock on iOS (#1824)

1.6.7 - 2022-07-12

Fixed

  • Prevent cancelling transitions due to focus trap (#1664)

1.6.6 - 2022-07-07

Fixed

  • Fix getting Vue dom elements (#1610)
  • Ensure CMD+Backspace works in nullable mode for Combobox component (#1617)
  • Properly merge incoming props with own props (#1651)
  • Ensure PopoverPanel can be used inside <transition> (#1653)

1.6.5 - 2022-06-20

Fixed

  • Support <slot> children when using as="template" (#1548)
  • Improve outside click of Dialog component (#1546)
  • Detect outside clicks from within <iframe> elements (#1552)
  • Only render the Dialog on the client (#1566)
  • Improve Combobox input cursor position (#1574)
  • Fix scrolling issue in Tab component when using arrow keys (#1584)
  • Fix missing aria-expanded for ComboboxInput component (#1605)

1.6.4 - 2022-05-29

Fixed

  • Ensure Escape propagates correctly in Combobox component (#1511)
  • Remove leftover code in Combobox component (#1514)

1.6.3 - 2022-05-25

Fixed

  • Allow to override the type on the ComboboxInput (#1476)
  • Ensure the the <PopoverPanel focus> closes correctly (#1477)
  • Only render the FocusSentinel if required in the Tabs component (#1493)

1.6.2 - 2022-05-19

Fixed

  • Ensure DialogPanel exposes its ref (#1404)
  • 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 PopoverPanel is clickable without closing the Popover (#1443)
  • Improve "Scroll lock" scrollbar width for Dialog component (#1457)
  • Don't throw when SSR rendering internal portals in Vue (#1459)

1.6.1 - 2022-05-03

Fixed

  • Manually passthrough attrs for Combobox, Listbox and TabsGroup component (#1372)
  • Fix enter transitions in Vue (#1395)

1.6.0 - 2022-04-25

Fixed

  • Make sure that the input syncs when the combobox closes (#1137)
  • Ensure that you can close the Combobox initially (#1148)
  • Fix Dialog usage in Tab component (#1149)
  • Ensure links are triggered inside PopoverPanel components (#1153)
  • Fix hover scroll issue in Listbox, Combobox and Menu components (#1161)
  • Guarantee DOM sort order when performing Listbox, Combobox and Menu actions (#1168)
  • Improve outside click support (#1175)
  • Reset ComboboxInput when the value gets reset (#1181)
  • Adjust active item/option index on Listbox, Combobox and Menu components (#1184)
  • Fix re-focusing element after close (#1186)
  • Fix Dialog cycling (#553)
  • 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)
  • Don't drop initial character when searching in Combobox (#1223)
  • Use ownerDocument instead of document (#1158)
  • Fix, re-expose el from each component (#1230)
  • Ensure focus trapping plays well with the Tab and Dialog components (#1231)
  • Improve syncing of ComboboxInput value (#1248)
  • Fix tree-shaking support (#1247)
  • Stop propagation on the PopoverButton (#1263)
  • Fix incorrect closing while interacting with third party libraries in Dialog component (#1268)
  • Mimic browser select on focus when navigating via Tab (#1272)
  • Resolve initialFocusRef correctly (#1276)
  • Ensure that there is always an active option in the Combobox (#1279, #1281)
  • Support classic form submissions in RadioGroup, Switch and Combobox components (#1285)
  • Fix nullable prop for Vue (2b109548b1a94a30858cf58c8f525554a1c12cbb)
  • Prefer incoming open prop over OpenClosed state (#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 DialogBackdrop and DialogPanel components (#1333)

1.5.0 - 2022-02-17

Fixed

  • Ensure correct order when conditionally rendering MenuItem, ListboxOption and RadioGroupOption (#1045)
  • 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)

Added

1.4.3 - 2022-01-14

Fixes

  • Fix missing key binding in examples (#1036, #1006)
  • Fix slice => splice typo in Tabs component (#1037, #986)
  • Ensure correct DOM node order when performing focus actions (#1038)

Added

  • Allow for TabGroup 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 DialogOverlay (#816)
  • Fix SSR crash because of useWindowEvent (#817)
  • Improve tree shaking (#859)
  • Add type="button" to Tabs component (#912)

1.4.1 - 2021-08-30

Fixes

  • Only add type=button to real buttons (#709)
  • Add Vue emit types (#679, #712)
  • 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 DisclosureButton close the disclosure inside a DisclosurePanel (#682)
  • Add aria-orientation to Listbox, which swaps Up/Down with Left/Right keys (#683)
  • Expose close function from the scoped slot for Disclosure, DisclosurePanel, Popover and PopoverPanel (#697)

1.3.0 - 2021-06-21

Added

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

Fixes

  • Add aria-disabled on disabled RadioGroup.Option components (#543)
  • Improve disabled and tabindex prop handling (#512)
  • Improve reactivity when destructuring from props (#512)
  • Improve aria-expanded logic (#592)

1.2.0 - 2021-05-10

Added

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

1.1.1 - 2021-04-28

Fixes

  • Fix form submission within Dialog (#460)
  • Fix TypeScript types for Listbox and Switch (#459, #461)

Added

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

1.1.0 - 2021-04-26

Fixes

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

Added

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

1.0.0 - 2021-04-14

Fixes

  • Fix incorrect DOM node from ref (#249)
  • Stop propagating keyboard/mouse events (#282)

Added

  • Add SwitchDescription component, which adds the aria-describedby to the actual Switch (#220)
  • Add Disclosure, DisclosureButton, DisclosurePanel components (#282)
  • Add Dialog, DialogOverlay, DialogTitle and DialogDescription components (#282)
  • Add Portal and PortalGroup components (#282)
  • Add FocusTrap component (#282)
  • Add Popover, PopoverButton, PopoverOverlay, PopoverPanel and PopoverGroup components (#282)
  • Add RadioGroup, RadioGroupOption, RadioGroupLabel and RadioGroupDescription components (#282)
  • Add TransitionRoot and TransitionChild components (#326)

0.3.1 - 2021-04-02

Fixes

  • Fix broken behaviour since Vue 3.0.5 (#279)

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)
  • Added emits property to Vue components (#199)
  • 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 render features + render strategy (static and unmount={true | false}) (#106)
  • Add disabled prop to Listbox itself, instead of the ListboxButton (#229)

0.2.0 - 2020-10-06

Added

  • Add Listbox component
  • Add Switch component

0.1.3 - 2020-09-29

Fixes

  • Fix an issue where you couldn't click on menu items that were links.
  • 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

Fixes

  • Fix issue where button MenuItem instances didn't properly fire click events
  • 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