diff --git a/shell/components/__tests__/NamespaceFilter.test.ts b/shell/components/__tests__/NamespaceFilter.test.ts index f1ba1d50c21..30878e5a1aa 100644 --- a/shell/components/__tests__/NamespaceFilter.test.ts +++ b/shell/components/__tests__/NamespaceFilter.test.ts @@ -244,4 +244,53 @@ describe('component: NamespaceFilter', () => { it.todo('should generate the options based on the Rancher resources'); }); + + describe('given filter input text selection', () => { + it('should allow text selection by stopping mousedown propagation', async() => { + const wrapper = mount(NamespaceFilter, { + computed: { + filtered: () => [], + options: () => [], + value: () => [], + }, + global: { + mocks: { + t: (key: string) => key, + $store: { getters: { 'i18n/t': () => '', namespaceFilterMode: () => undefined } }, + $fetchState: { pending: false } + }, + directives: { + 'clean-tooltip': () => {}, + shortkey: () => {}, + }, + stubs: { RcButton: { template: '' } }, + } + }); + + // Open the dropdown to reveal the filter input + const dropdown = wrapper.find('[data-testid="namespaces-dropdown"]'); + + await dropdown.trigger('click'); + + // Find the filter input + const filterInput = wrapper.find('.ns-filter-input'); + + expect(filterInput.exists()).toBe(true); + + // Trigger mousedown on the filter input and capture the event + const mousedownEvent = new MouseEvent('mousedown', { + bubbles: true, + cancelable: true + }); + const stopPropagationSpy = jest.spyOn(mousedownEvent, 'stopPropagation'); + + filterInput.element.dispatchEvent(mousedownEvent); + + // Verify stopPropagation was called (which allows text selection) + expect(stopPropagationSpy).toHaveBeenCalledWith(); + + // Verify the default was NOT prevented (text selection should work) + expect(mousedownEvent.defaultPrevented).toBe(false); + }); + }); }); diff --git a/shell/components/nav/NamespaceFilter.vue b/shell/components/nav/NamespaceFilter.vue index b11daf14daa..b098e0cacb9 100644 --- a/shell/components/nav/NamespaceFilter.vue +++ b/shell/components/nav/NamespaceFilter.vue @@ -841,6 +841,7 @@ export default { tabindex="0" class="ns-filter-input" :aria-label="t('namespaceFilter.input')" + @mousedown.stop @click="focusFilter" @keydown="inputKeyHandler($event)" >