Skip to content

Conversation

@dganesh05
Copy link

@dganesh05 dganesh05 commented Oct 20, 2025

feat(explore): auto-focus search input in visualization type gallery

SUMMARY

This PR implements auto-focus functionality for the search input in the visualization type selection modal. When users open the "Change Visualization Type" modal, the search input is now automatically focused, allowing them to immediately start typing without needing to manually click on the search field first.

Rationale:

  • Improves user experience by reducing unnecessary clicks
  • Follows common modal interaction patterns that users expect
  • Enhances keyboard accessibility and power user workflows
  • Creates a smoother, more efficient chart creation process

Design Decision:

  • Used existing searchInputRef to avoid adding new dependencies
  • Implemented with a simple useEffect hook that runs on component mount
  • Added safety check to ensure ref is available before calling focus()
  • Minimal code change with maximum impact

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: User opens modal → must click search input → can start typing
After: User opens modal → search input is already focused → can immediately start typing
Superset Issue #2

TESTING INSTRUCTIONS

  1. Open any chart in Explore view
  2. Click the "Change Visualization Type" button (or "View all charts" link)
  3. Verify that the modal opens with the search input automatically focused (the cursor should be visible in the search field)
  4. Start typing immediately without clicking on the search field
  5. Confirm that the search functionality works as expected
  6. Test that existing modal behaviors (category selection, chart thumbnails, etc.) remain unchanged

Additional Test Cases:

  • Verify the change works across different browsers
  • Test keyboard navigation (Tab, Enter, Escape) still functions properly
  • Confirm that clicking outside the search input and back still works
  • Ensure the modal can be closed and reopened with the same behavior

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant