fix(ld-select): make arrow up and down behave just like with the nati…

…ve select
emdgroup-liquid · Jun 30, 2021 · f52f1c1 · f52f1c1
1 parent 31246bb
commit f52f1c1
Showing 1 changed file with 29 additions and 12 deletions.
diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx
@@ -175,28 +175,45 @@ export class LdSelect {
               )
             }
             if (!optionToFocus) {
-              optionToFocus = this.popperRef.querySelector('ld-option')
+              optionToFocus = this.triggerRef
             }
-            if (optionToFocus) optionToFocus.focus()
+            optionToFocus.focus()
           })
         }
         break
       }
       case 'ArrowUp':
         // Move focus to the previous option.
         ev.preventDefault()
-        if (document.activeElement.previousElementSibling) {
-          ;(document.activeElement
-            .previousElementSibling as HTMLElement)?.focus()
-        } else {
-          if (this.popperRef.dataset.popperPlacement.includes('top')) {
-            if (document.activeElement === this.triggerRef) {
-              const options = this.popperRef.querySelectorAll('ld-option')
-              options[options.length - 1]?.focus()
-            }
+        if (this.expanded) {
+          if (document.activeElement.previousElementSibling) {
+            ;(document.activeElement
+              .previousElementSibling as HTMLElement)?.focus()
           } else {
-            this.triggerRef.focus()
+            if (this.popperRef.dataset.popperPlacement.includes('top')) {
+              if (document.activeElement === this.triggerRef) {
+                const options = this.popperRef.querySelectorAll('ld-option')
+                options[options.length - 1]?.focus()
+              }
+            } else {
+              this.triggerRef.focus()
+            }
           }
+        } else {
+          this.handleTriggerClick()
+          setTimeout(() => {
+            // If selected in single select mode, focus selected
+            let optionToFocus
+            if (!this.multiple) {
+              optionToFocus = this.popperRef.querySelector(
+                'ld-option[aria-selected="true"]'
+              )
+            }
+            if (!optionToFocus) {
+              optionToFocus = this.triggerRef
+            }
+            optionToFocus.focus()
+          })
         }
         break
       case 'Home':