Skip to content

[select] Reset typeahead on external blur#2618

Merged
michaldudak merged 7 commits intomui:masterfrom
antonfrolovsky:fix/use-typehead
Jan 28, 2026
Merged

[select] Reset typeahead on external blur#2618
michaldudak merged 7 commits intomui:masterfrom
antonfrolovsky:fix/use-typehead

Conversation

@antonfrolovsky
Copy link
Copy Markdown
Contributor

@antonfrolovsky antonfrolovsky commented Sep 3, 2025

Fixes #2608

Updated useTypeahead to handle onBlur so the typeahead session resets only when focus leaves the reference ↔ floating pair.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Sep 3, 2025

  • vite-css-base-ui-example

    pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@2618
    
    pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@2618
    

commit: 5d8b12d

@netlify
Copy link
Copy Markdown

netlify bot commented Sep 3, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 5d8b12d
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/697338dfeca52f0008903203
😎 Deploy Preview https://deploy-preview-2618--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@zannager zannager added the component: select Changes related to the select component. label Sep 4, 2025
@mj12albert mj12albert changed the title [useTypeahead] reset typeahead on external blur and start new session… [useTypeahead] reset typeahead on external blur Sep 23, 2025
@mui-bot
Copy link
Copy Markdown

mui-bot commented Sep 23, 2025

Bundle size report

Bundle Parsed size Gzip size
@base-ui/react 🔺+286B(+0.07%) 🔺+76B(+0.06%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

@mj12albert mj12albert changed the title [useTypeahead] reset typeahead on external blur [select] Reset typeahead on external blur Sep 30, 2025
Copy link
Copy Markdown
Member

@mj12albert mj12albert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great, thanks for the contribution @antonfrolovsky

Comment on lines +205 to +206
const withinReference = next ? elements.domReference?.contains(next) === true : false;
const withinFloating = next ? elements.floating?.contains(next) === true : false;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should use shadow DOM contains util

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I'll check it out as soon as possible

@atomiks
Copy link
Copy Markdown
Contributor

atomiks commented Sep 30, 2025

The solution here might be simpler given it works when it re-opens: #2608 (comment)

Maybe the resetting just needs to happen when selectedIndex === null as well as when it re-opens.

  useIsoLayoutEffect(() => {
    if (open) {
      timeout.clear();
      matchIndexRef.current = null;
      stringRef.current = '';
    }
  }, [open, timeout]);

@antonfrolovsky
Copy link
Copy Markdown
Contributor Author

@atomiks Used the contains util in blur handling and added the selectedIndex === null check so typeahead resets when the selection clears.

@antonfrolovsky antonfrolovsky requested a review from atomiks October 8, 2025 15:09
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 27, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 23, 2026
@michaldudak
Copy link
Copy Markdown
Member

I found one other issue with prevIndexRef not being initialized properly at the start of new typing session and I fixed it as it was a one-liner.
@atomiks, do you have any other remarks or can we merge it?

@michaldudak michaldudak merged commit 6059946 into mui:master Jan 28, 2026
23 checks passed
@michaldudak
Copy link
Copy Markdown
Member

Thanks for your contribution, @antonfrolovsky!

@michaldudak michaldudak added the type: bug It doesn't behave as expected. label Jan 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: select Changes related to the select component. type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[select] Typeahead remembers the previous item after resetting the selected value

6 participants