Auto-focus Search Input in Visualization Type Modal

[ffalathel]

Summary

This PR improves the user experience in the "Change Visualization Type" modal by automatically focusing the search input when the modal opens, eliminating the need for users to manually click on the search field before typing.

Problem

Currently, when users open the "Change Visualization Type" modal, they must manually click on the search input field before they can start typing to search for visualization types. This adds an unnecessary step to the workflow and creates friction in the user experience.

Before:

1. User clicks to change visualization type
2. Modal opens
3. User must click on search input field
4. User can start typing to search

Screen.Recording.2025-10-12.at.18.54.02.mov

After:

1. User clicks to change visualization type
2. Modal opens with search input automatically focused
3. User can immediately start typing to search

Screen.Recording.2025-10-12.at.19.40.39.mov

Solution

• Added useRef hook to create a reference to the search input element
• Implemented useEffect hook to automatically focus the search input when the VizTypeGallery component mounts
• Used setTimeout with 150ms delay to ensure the modal animation completes before focusing
• Added proper cleanup to prevent memory leaks

Changes Made

Files Modified

• superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx

  • Added useRef and useEffect imports
  • Created searchInputRef to reference the search input
  • Added auto-focus logic with proper timing
  • Added cleanup function to clear timeout

• superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx

  • Added comprehensive test case for auto-focus functionality
  • Used jest.useFakeTimers() and jest.runAllTimers() for reliable testing
  • Mocked scroll-into-view-if-needed to prevent test failures
  • Added proper async assertions with waitFor

Technical Details

Implementation

// Added to VizTypeGallery.tsx
const searchInputRef = useRef<HTMLInputElement>();

useEffect(() => {
  // Use setTimeout to ensure the modal animation completes before focusing
  const timeoutId = setTimeout(() => {
    if (searchInputRef.current) {
      searchInputRef.current.focus();
    }
  }, 150);

  return () => clearTimeout(timeoutId);
}, []);

Testing

• Added test case that verifies the search input is automatically focused when the modal opens
• Used fake timers to control the setTimeout behavior
• Ensured proper cleanup and async handling

Benefits

• Improved UX: Eliminates unnecessary click step for power users
• Keyboard-friendly: Enables full keyboard navigation workflow
• Faster chart creation: Reduces clicks needed to change visualization type
• Consistent behavior: Follows common modal interaction patterns

Use Cases

• Business Analysts: Faster chart creation workflow
• Power Users: Keyboard-only navigation support
• General Users: Smoother, more intuitive interaction

Testing

• ✅ Unit tests pass with new auto-focus test case

Accessibility

• Maintains keyboard navigation support
• Preserves screen reader compatibility
• No impact on existing accessibility features

Backward Compatibility

• ✅ No breaking changes
• ✅ Existing functionality preserved
• ✅ No API changes required

Related Issues

• Addresses UX friction in visualization type selection
• Improves workflow efficiency for chart creation
• Enhances keyboard accessibility

---

Type: Enhancement
Impact: User Experience
Breaking Changes: None
Dependencies: None