feat(autocomplete): replace "cancel" with a back button in detached mode#6942
feat(autocomplete): replace "cancel" with a back button in detached mode#6942
Conversation
In preparation for ai mode, moving from an explicit cancel button to a back button that replaces the submit button (there's already a search button on the keyboard) allows us to get rid of the previous cancel button. the loading icon still replaces the back button like it used to with submit. This is still allowed as we are in experimental autocomplete.
More templates
algoliasearch-helper
instantsearch-ui-components
instantsearch.css
instantsearch.js
react-instantsearch
react-instantsearch-core
react-instantsearch-nextjs
react-instantsearch-router-nextjs
vue-instantsearch
commit: |
There was a problem hiding this comment.
Pull request overview
This PR updates the experimental Autocomplete detached-mode UX by removing the detached “Cancel” button and introducing a dedicated back button inside the search input, aligning detached-mode controls with upcoming AI-mode behavior.
Changes:
- Introduces a new back button (and
BackIcon) for detached mode, replacing the prior detached cancel button UI. - Wires detached close behavior through shared
handleCancellogic and passes new props through React / InstantSearch wrappers. - Updates styling and test suites to reflect the new DOM structure and removed cancel button.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/common/widgets/autocomplete/options.tsx | Updates integration expectations for back button vs removed detached cancel button. |
| packages/react-instantsearch/src/widgets/Autocomplete.tsx | Adds detached back-button wiring via new AutocompleteSearch props and consolidates cancel/close handling. |
| packages/react-instantsearch/src/components/AutocompleteSearch.tsx | Threads new onSubmit / detached-related props through to UI component layer. |
| packages/instantsearch.js/src/widgets/autocomplete/autocomplete.tsx | Mirrors detached back-button wiring and cancel/close consolidation for InstantSearch.js widget. |
| packages/instantsearch.css/src/components/autocomplete.scss | Adds styling for .ais-AutocompleteBackButton and removes detached cancel button styles. |
| packages/instantsearch-ui-components/src/components/autocomplete/icons.tsx | Adds BackIcon for the detached back button. |
| packages/instantsearch-ui-components/src/components/autocomplete/tests/AutocompleteSearch.test.tsx | Adds unit tests validating detached back button rendering and removal of detached cancel button. |
| packages/instantsearch-ui-components/src/components/autocomplete/AutocompleteSearch.tsx | Implements detached back button rendering and new props (onSubmit, isDetached, submitTitle). |
| packages/instantsearch-ui-components/src/components/autocomplete/AutocompleteDetachedFormContainer.tsx | Removes rendering of the detached cancel button. |
| packages/instantsearch-ui-components/src/components/autocomplete/Autocomplete.tsx | Clarifies that detachedCancelButton class name is retained for backwards compatibility. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| userProps: AutocompleteDetachedFormContainerProps | ||
| ) { | ||
| const { children, classNames = {}, onCancel, translations } = userProps; | ||
| const { children, classNames = {} } = userProps; |
There was a problem hiding this comment.
AutocompleteDetachedFormContainer no longer renders/uses onCancel and translations, but those props are still required by AutocompleteDetachedFormContainerProps. This forces new consumers to pass unused values and makes the public API misleading. Consider making these props optional (and/or marking them deprecated in the type) now that the cancel button isn’t rendered.
There was a problem hiding this comment.
is it not still using it for the title of the back button? @copilot do you mind explaining?
| <form | ||
| className="ais-AutocompleteForm" | ||
| action="" | ||
| noValidate | ||
| role="search" | ||
| onSubmit={(e) => e.preventDefault()} | ||
| onSubmit={(e) => { | ||
| e.preventDefault(); | ||
| }} | ||
| onReset={() => inputRef.current?.focus()} | ||
| > | ||
| <div className="ais-AutocompleteInputWrapperPrefix"> | ||
| {isBackButton && ( | ||
| <button | ||
| className="ais-AutocompleteBackButton" | ||
| type="button" | ||
| title={resolvedCancelTitle} | ||
| onClick={onSubmit} | ||
| hidden={isSearchStalled} |
There was a problem hiding this comment.
The new onSubmit prop name is misleading here: it isn’t invoked on the form submit event (the form handler only preventDefault()), and it’s only used as the back-button click handler in detached mode. This can confuse consumers and makes it easy to wire the wrong behavior. Consider either calling the callback from the form onSubmit handler (when appropriate) or renaming the prop to something like onBack/onCancel (potentially keeping onSubmit as a deprecated alias).
In preparation for ai mode, moving from an explicit cancel button to a back button that replaces the submit button (there's already a search button on the keyboard) allows us to get rid of the previous cancel button.
the loading icon still replaces the back button like it used to with submit.
This is still allowed as we are in experimental autocomplete.