Skip to content

Commit 3aa0b92

Browse files
authored
Fix text selection in namespace filter input () (#16335)
The parent container's @mousedown.prevent was blocking text selection in the filter input. Adding @mousedown.stop to the input prevents the event from bubbling up, allowing normal text selection behavior while preserving the dropdown's focus management. Fixes #12658
1 parent f04fe0c commit 3aa0b92

File tree

2 files changed

+50
-0
lines changed

2 files changed

+50
-0
lines changed

shell/components/__tests__/NamespaceFilter.test.ts

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,4 +244,53 @@ describe('component: NamespaceFilter', () => {
244244

245245
it.todo('should generate the options based on the Rancher resources');
246246
});
247+
248+
describe('given filter input text selection', () => {
249+
it('should allow text selection by stopping mousedown propagation', async() => {
250+
const wrapper = mount(NamespaceFilter, {
251+
computed: {
252+
filtered: () => [],
253+
options: () => [],
254+
value: () => [],
255+
},
256+
global: {
257+
mocks: {
258+
t: (key: string) => key,
259+
$store: { getters: { 'i18n/t': () => '', namespaceFilterMode: () => undefined } },
260+
$fetchState: { pending: false }
261+
},
262+
directives: {
263+
'clean-tooltip': () => {},
264+
shortkey: () => {},
265+
},
266+
stubs: { RcButton: { template: '<button><slot /></button>' } },
267+
}
268+
});
269+
270+
// Open the dropdown to reveal the filter input
271+
const dropdown = wrapper.find('[data-testid="namespaces-dropdown"]');
272+
273+
await dropdown.trigger('click');
274+
275+
// Find the filter input
276+
const filterInput = wrapper.find('.ns-filter-input');
277+
278+
expect(filterInput.exists()).toBe(true);
279+
280+
// Trigger mousedown on the filter input and capture the event
281+
const mousedownEvent = new MouseEvent('mousedown', {
282+
bubbles: true,
283+
cancelable: true
284+
});
285+
const stopPropagationSpy = jest.spyOn(mousedownEvent, 'stopPropagation');
286+
287+
filterInput.element.dispatchEvent(mousedownEvent);
288+
289+
// Verify stopPropagation was called (which allows text selection)
290+
expect(stopPropagationSpy).toHaveBeenCalledWith();
291+
292+
// Verify the default was NOT prevented (text selection should work)
293+
expect(mousedownEvent.defaultPrevented).toBe(false);
294+
});
295+
});
247296
});

shell/components/nav/NamespaceFilter.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -841,6 +841,7 @@ export default {
841841
tabindex="0"
842842
class="ns-filter-input"
843843
:aria-label="t('namespaceFilter.input')"
844+
@mousedown.stop
844845
@click="focusFilter"
845846
@keydown="inputKeyHandler($event)"
846847
>

0 commit comments

Comments
 (0)