Merge pull request #11966 from rak-phillip/bugfix/11928-focus-filter

Allow the namespace filter to be selected after making selection in the dropdown
rancher · Sep 19, 2024 · f9d6f31 · f9d6f31
2 parents 5607114 + b72a24c
commit f9d6f31
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/cypress/e2e/po/components/namespace-filter.po.ts b/cypress/e2e/po/components/namespace-filter.po.ts
@@ -30,7 +30,7 @@ export class NamespaceFilterPo extends ComponentPo {
   }
 
   searchByName(label: string) {
-    return this.self().find('.ns-controls > .ns-input').clear().type(label);
+    return this.self().find('.ns-controls > .ns-input > .ns-filter-input').clear().type(label);
   }
 
   clearSearchFilter() {

diff --git a/cypress/e2e/tests/pages/explorer2/namespace-picker.spec.ts b/cypress/e2e/tests/pages/explorer2/namespace-picker.spec.ts
@@ -154,6 +154,18 @@ describe('Namespace picker', { testIsolation: 'off' }, () => {
     namespacePicker.checkIcon().should('have.length', 1);
   });
 
+  it('can filter after making a selection', { tags: ['@explorer2', '@adminUser', '@standardUser'] }, () => {
+    namespacePicker.toggle();
+
+    // Select 'Project: Default'
+    namespacePicker.clickOptionByLabel('Project: Default');
+    namespacePicker.isChecked('Project: Default');
+    namespacePicker.checkIcon().should('have.length', 1);
+
+    namespacePicker.searchByName('default');
+    namespacePicker.getOptions().find('.ns-option').should('have.length.gte', 2);
+  });
+
   it('can filter options by name', { tags: ['@explorer2', '@adminUser', '@standardUser'] }, () => {
     namespacePicker.toggle();
 

diff --git a/shell/components/nav/NamespaceFilter.vue b/shell/components/nav/NamespaceFilter.vue
@@ -597,11 +597,14 @@ export default {
     open() {
       this.isOpen = true;
       this.$nextTick(() => {
-        this.$refs.filter.focus();
+        this.focusFilter();
       });
       this.addCloseKeyHandler();
       this.layout();
     },
+    focusFilter() {
+      this.$refs.filter.focus();
+    },
     close() {
       this.isOpen = false;
       this.activeElement = null;
@@ -798,6 +801,7 @@ export default {
             v-model="filter"
             tabindex="0"
             class="ns-filter-input"
+            @click="focusFilter"
             @keydown="inputKeyHandler($event)"
           >
           <i