Ios autoselect

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## [Unreleased]
 
+## 1.10.5 - 2023-07-03
+
+- autoselect partially enabled ios - using keyboard Done button
+  [@viktorgasko](https://github.com/viktorgasko)
+    ([#30](https://github.com/lightingbeetle/accessible-autocomplete/pull/30))
+
+## 1.10.4 - 2019-06-09
+
+- remove unnecessary `menuOpen` state change in `componentDidUpdate` lifecycle
+  [@benistary](https://github.com/benistary)
+    ([#29](https://github.com/lightingbeetle/accessible-autocomplete/pull/29))
+
 ## 1.10.3 - 2019-26-08
 
 - pass `event` to `onChange` function as a second argument

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lighting-beetle/accessible-autocomplete",
-  "version": "1.10.3",
+  "version": "1.11.0",
   "main": "dist/accessible-autocomplete.min.js",
   "style": "dist/accessible-autocomplete.min.css",
   "description": "An autocomplete component, built to be accessible.",

src/autocomplete.js

@@ -188,7 +188,7 @@ export default class Autocomplete extends Component {
   }
 
   hasAutoselect () {
-    return isIosDevice() ? false : this.props.autoselect
+    return this.props.autoselect
   }
 
   // This template is used when converting from a state.options object into a state.query.
@@ -234,7 +234,7 @@ export default class Autocomplete extends Component {
     const focusingAnotherOption = focused !== index && focused !== -1
     const blurComponent = (!focusingAnotherOption && focusingOutsideComponent) || !(focusingAnotherOption || focusingInput)
     if (blurComponent) {
-      const keepMenuOpen = menuOpen && isIosDevice()
+      const keepMenuOpen = menuOpen && isIosDevice() && !this.hasAutoselect()
       this.handleComponentBlur({
         menuOpen: keepMenuOpen,
         query: this.templateInputValue(options[selected])
@@ -246,7 +246,18 @@ export default class Autocomplete extends Component {
     const { focused, menuOpen, options, query, selected } = this.state
     const focusingAnOption = focused !== -1
     clearTimeout(this.$blurInput)
-    if (!focusingAnOption) {
+    if (
+      isIosDevice() &&
+      !event.relatedTarget &&
+      !focusingAnOption &&
+      this.hasAutoselect()
+    ) {
+      const newQuery = this.templateInputValue(options[selected]);
+      this.$blurInput = setTimeout(() => this.handleComponentBlur({
+        menuOpen: false,
+        query: newQuery
+      }), 200)
+    } else if (!focusingAnOption) {
       const keepMenuOpen = menuOpen && isIosDevice()
       const newQuery = isIosDevice() ? query : this.templateInputValue(options[selected])
       this.$blurInput = setTimeout(() => this.handleComponentBlur({
@@ -452,6 +463,7 @@ export default class Autocomplete extends Component {
       menuClassName: passedMenuClassName,
       optionClassName: passedOptionClassName,
       displayMenu,
+      enterKeyHint,
       id,
       minLength,
       name,
@@ -531,6 +543,7 @@ export default class Autocomplete extends Component {
         )}
 
         <input
+          enterkeyhint={enterKeyHint || (isIosDevice() && autoselect ? 'done' : '')}
           aria-activedescendant={optionFocused ? `${id}__option--${focused}` : false}
           aria-owns={`${id}__listbox`}
           autoComplete='off'