feat: set pointer to most recent selected option on open (#1574)

Co-authored-by: Jeff Sagal <sagalbot@gmail.com>

src/mixins/typeAheadPointer.js

@@ -14,6 +14,16 @@ export default {
         }
       }
     },
+    open(open) {
+      if (open) {
+        this.typeAheadToLastSelected()
+      }
+    },
+    selectedValue() {
+      if (this.open) {
+        this.typeAheadToLastSelected()
+      }
+    },
   },
 
   methods: {
@@ -61,5 +71,17 @@ export default {
         this.select(typeAheadOption)
       }
     },
+
+    /**
+     * Moves the pointer to the last selected option.
+     */
+    typeAheadToLastSelected() {
+      this.typeAheadPointer =
+        this.selectedValue.length !== 0
+          ? this.filteredOptions.indexOf(
+              this.selectedValue[this.selectedValue.length - 1]
+            )
+          : -1
+    },
   },
 }

tests/unit/Accessibility.spec.js

@@ -4,7 +4,7 @@ describe('Search Slot Scope', () => {
   /**
    * @see https://www.w3.org/WAI/PF/aria/states_and_properties#aria-activedescendant
    */
-  describe('aria-activedescendant', () => {
+  fdescribe('aria-activedescendant', () => {
     it('adds the active descendant attribute only when the dropdown is open and there is a typeAheadPointer value', async () => {
       const Select = mountDefault()
 
@@ -21,7 +21,7 @@ describe('Search Slot Scope', () => {
     })
 
     it("adds the active descendant attribute when there's a typeahead value and an open dropdown", async () => {
-      const Select = mountDefault()
+      const Select = mountDefault({ value: 'three' }, ['one', 'two', 'three'])
 
       Select.vm.open = true
       Select.vm.typeAheadPointer = 1
@@ -29,7 +29,7 @@ describe('Search Slot Scope', () => {
 
       expect(
         Select.vm.scope.search.attributes['aria-activedescendant']
-      ).toEqual(`vs${Select.vm.uid}__option-1`)
+      ).toEqual(`vs${Select.vm.uid}__option-2`)
     })
   })
 })

tests/unit/TypeAhead.spec.js

@@ -44,4 +44,37 @@ describe('Moving the Typeahead Pointer', () => {
     Select.vm.typeAheadDown()
     expect(Select.vm.typeAheadPointer).toEqual(2)
   })
+
+  it('will set the pointer to the selected option when opening', async () => {
+    const Select = shallowMount(VueSelect, {
+      propsData: {
+        value: 'three',
+        options: ['one', 'two', 'three'],
+      },
+    })
+
+    Select.findComponent({ ref: 'search' }).trigger('focus')
+    await Select.vm.$nextTick()
+
+    expect(Select.vm.typeAheadPointer).toEqual(2)
+  })
+
+  it('will set the pointer to the reduced selected option when opening', async () => {
+    const Select = shallowMount(VueSelect, {
+      propsData: {
+        value: 3,
+        reduce: ({ value }) => value,
+        options: [
+          { label: 'one', value: 1 },
+          { label: 'two', value: 2 },
+          { label: 'three', value: 3 },
+        ],
+      },
+    })
+
+    Select.findComponent({ ref: 'search' }).trigger('focus')
+    await Select.vm.$nextTick()
+
+    expect(Select.vm.typeAheadPointer).toEqual(2)
+  })
 })