@acusti/dropdown 1.1.0 → 1.1.1

package/README.md

@@ -325,7 +325,8 @@ type Props = {
      * multi-select. Defaults to !hasItems: a menu closes on submit, while a
      * hasItems={false} dialog stays open. In a hasItems={false} dropdown, a
      * submit is a form in the body being submitted, or Enter in a
-     * single-line input there that no form owns.
+     * single-line input that appears in the body with no form or in the
+     * trigger.
      */
     keepOpenOnSubmit?: boolean;
     /**
@@ -726,12 +727,17 @@ while it’s open, as when it opened on hover. Escape closes the dropdown
 unless focus is in a text field (a text input, a textarea, or an editable
 element). On the trigger, Space and Enter open the dropdown and, unless
 focus is in a text field or a checkbox there, close it again, as a click
-there does.
+there does. Once it is open, Enter in a textarea or an editable element
+used as the trigger adds a line break there. Enter in a single-line input
+used as the trigger is a submit, whether or not a form owns it: the
+dropdown takes the key, so a form around the trigger isn’t submitted from
+that input while the dropdown is open.
 
 A `hasItems={false}` dropdown stays open until it is dismissed. Pass
 `keepOpenOnSubmit={false}` to close it when its content is submitted. A
 submit is a form in the body being submitted, by Enter in one of its inputs
-or by its submit button, or Enter in a single-line input that no form owns:
+or by its submit button, or Enter in a single-line input, either one in the
+body that no form owns or one used as the trigger:
 
 ```tsx
 <Dropdown hasItems={false} keepOpenOnSubmit={false}>
@@ -753,9 +759,9 @@ empty. To keep it open after a submit that your own checks reject, call
 check that finishes later, such as a server round trip or a form library
 that validates asynchronously, can’t keep it open.
 
-Enter in an input that no form owns counts the way a form would count it:
-not when a handler has prevented the key, as a combobox does to pick an
-option, and not when it commits an IME composition.
+Enter in such an input, in the body or the trigger, counts the way a form
+would count it: not when a handler has prevented the key, as a combobox
+does to pick an option, and not when it commits an IME composition.
 
 When a submit closes the dropdown while focus is in its body, focus returns
 to the trigger, as it does on Escape.
@@ -1330,6 +1336,13 @@ highlight into it.
   input, or one inside a custom trigger), where they move the caret instead
 - **Type characters**: Jump to the best-matching item in the current level
 
+While text is being composed with an IME, in a searchable dropdown’s input
+or a text field in a custom trigger, the dropdown ignores every keydown
+that the browser reports as part of the composition. With a Japanese IME,
+the Enter that commits the text doesn’t submit (the next Enter is an
+ordinary one), and the arrow keys and Escape don’t move the highlight or
+close the dropdown. Other IMEs can report their keys differently.
+
 For accessibility, the component focuses on semantic HTML structure and
 keyboard navigation. It works best when you use appropriate HTML elements
 in your dropdown content (like `<ul>` and `<li>` for lists, `<button>`

package/dist/Dropdown.d.ts

@@ -101,7 +101,8 @@ export type Props = {
      * multi-select. Defaults to !hasItems: a menu closes on submit, while a
      * hasItems={false} dialog stays open. In a hasItems={false} dropdown, a
      * submit is a form in the body being submitted, or Enter in a
-     * single-line input there that no form owns.
+     * single-line input that appears in the body with no form or in the
+     * trigger.
      */
     keepOpenOnSubmit?: boolean;
     /**

package/dist/Dropdown.js

@@ -28,7 +28,9 @@ var isFormlessTextInput = (element) => {
 	const { form, type } = element;
 	return form == null && !NON_TEXT_INPUT_TYPES.includes(type);
 };
-var isSubmitKey = (event) => event.key === "Enter" && !event.defaultPrevented && !event.isComposing && event.keyCode !== 229;
+var isMultilineTextField = (element) => element.tagName === "TEXTAREA" || element.isContentEditable;
+var isIMEKeyEvent = (event) => event.isComposing || event.keyCode === 229;
+var isSubmitKey = (event) => event.key === "Enter" && !event.defaultPrevented;
 var getLevelRoot = (element) => element.closest(SUBMENU_SELECTOR);
 var getSubmenuOfItem = (item) => {
 	const submenu = item.querySelector(SUBMENU_SELECTOR);
@@ -1259,6 +1261,7 @@ function RootDropdown(t0) {
 			const { altKey, ctrlKey, key: key_0, metaKey } = event_7;
 			const eventTarget_2 = event_7.target;
 			if (!dropdownElement) return;
+			if (isIMEKeyEvent(event_7)) return;
 			const onEventHandled = () => {
 				event_7.stopPropagation();
 				event_7.preventDefault();
@@ -1311,7 +1314,7 @@ function RootDropdown(t0) {
 						if (!event_7.repeat) closeDropdown();
 						return;
 					}
-					if (key_0 === " ") return;
+					if (isMultilineTextField(eventTarget_2) || !isSubmitKey(event_7)) return;
 				} else if (isTargetUsingKeyEvents || !eventTarget_2.contains(dropdownElement)) return;
 			}
 			if (key_0 === "Enter" || key_0 === " " && !inputElementRef.current) {