fix: add prop to disable keyboard shortcut

Author: CodyWMitchell

packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import DataViewTextFilter, { DataViewTextFilterProps } from './DataViewTextFilter';
 import DataViewToolbar from '../DataViewToolbar';
@@ -23,7 +23,7 @@ describe('DataViewTextFilter component', () => {
   });
 
   it('should focus the search input when "/" key is pressed and filter is visible', () => {
-    const { container } = render(<DataViewToolbar
+    render(<DataViewToolbar
       filters={ 
         <DataViewTextFilter {...defaultProps} showToolbarItem={true} />
       }
@@ -46,7 +46,7 @@ describe('DataViewTextFilter component', () => {
   });
 
   it('should not focus the search input when "/" key is pressed if filter is not visible', () => {
-    const { container } = render(<DataViewToolbar
+    render(<DataViewToolbar
       filters={ 
         <DataViewTextFilter {...defaultProps} showToolbarItem={false} />
       }
@@ -81,7 +81,6 @@ describe('DataViewTextFilter component', () => {
     );
 
     const otherInput = container.querySelector('[data-testid="other-input"]') as HTMLInputElement;
-    const searchInput = document.getElementById('test-filter') as HTMLInputElement;
 
     // Focus the other input first
     otherInput.focus();
@@ -104,4 +103,50 @@ describe('DataViewTextFilter component', () => {
     // The search input should not be focused since we're already in an input field
     expect(document.activeElement).toBe(otherInput);
   });
+
+  it('should not focus the search input when enableShortcut is false', () => {
+    render(<DataViewToolbar
+      filters={ 
+        <DataViewTextFilter {...defaultProps} showToolbarItem={true} enableShortcut={false} />
+      }
+    />);
+    
+    const input = document.getElementById('test-filter') as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+    
+    // Simulate pressing "/" key
+    const keyEvent = new KeyboardEvent('keydown', {
+      key: '/',
+      code: 'Slash',
+      bubbles: true,
+      cancelable: true,
+    });
+    window.dispatchEvent(keyEvent);
+    
+    // The input should not be focused since the shortcut is disabled
+    expect(document.activeElement).not.toBe(input);
+  });
+
+  it('should focus the search input when enableShortcut is true (default)', () => {
+    render(<DataViewToolbar
+      filters={ 
+        <DataViewTextFilter {...defaultProps} showToolbarItem={true} />
+      }
+    />);
+    
+    const input = document.getElementById('test-filter') as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+    
+    // Simulate pressing "/" key
+    const keyEvent = new KeyboardEvent('keydown', {
+      key: '/',
+      code: 'Slash',
+      bubbles: true,
+      cancelable: true,
+    });
+    window.dispatchEvent(keyEvent);
+    
+    // The input should be focused since the shortcut is enabled by default
+    expect(document.activeElement).toBe(input);
+  });
 });

packages/module/src/DataViewTextFilter/DataViewTextFilter.tsx

@@ -17,6 +17,8 @@ export interface DataViewTextFilterProps extends SearchInputProps {
   trimValue?: boolean;
   /** Custom OUIA ID */
   ouiaId?: string;
+  /** Enable keyboard shortcut (/) to focus the filter. Defaults to true. */
+  enableShortcut?: boolean;
 }
 
 export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
@@ -28,9 +30,14 @@ export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
   showToolbarItem,
   trimValue = true,
   ouiaId = 'DataViewTextFilter',
+  enableShortcut = true,
   ...props
 }: DataViewTextFilterProps) => {
   useEffect(() => {
+    if (!enableShortcut) {
+      return;
+    }
+
     const handleKeyDown = (event: KeyboardEvent) => {
       // Only handle "/" key when not typing in an input, textarea, or contenteditable element
       if (event.key === '/' && !event.ctrlKey && !event.metaKey && !event.altKey) {
@@ -55,7 +62,7 @@ export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [showToolbarItem, filterId]);
+  }, [showToolbarItem, filterId, enableShortcut]);
 
   return (
     <ToolbarFilter