Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(refinement-list): re-apply focus on facet checkbox after render #6392

Merged
merged 6 commits into from
Oct 21, 2024
Merged

fix(refinement-list): re-apply focus on facet checkbox after render #6392

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9f54627
fix(refinement-list): re-apply focus on facet checkbox after render
dhayab Oct 17, 2024
0fdd54a
add tests
dhayab Oct 17, 2024
94270e5
sort imports
dhayab Oct 17, 2024
2499f8a
move test to cts
dhayab Oct 18, 2024
289d7ae
workaround for vue 3 test
dhayab Oct 21, 2024
7e5fbf5
Merge branch 'master' into fix/refinement-list-keyboard-focus
dhayab Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion packages/instantsearch.js/src/components/RefinementList/RefinementList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,11 @@ class RefinementList<TTemplates extends Templates> extends Component<
> {
public static defaultProps = defaultProps;

private listRef = createRef<HTMLUListElement>();
private searchBox = createRef<SearchBox>();

private lastRefinedValue: string | undefined = undefined;

public shouldComponentUpdate(
nextProps: RefinementListPropsWithDefaultProps<TTemplates>
) {
Expand All @@ -122,6 +125,7 @@ class RefinementList<TTemplates extends Templates> extends Component<
}

private refine(facetValueToRefine: string) {
this.lastRefinedValue = facetValueToRefine;
this.props.toggleRefinement(facetValueToRefine);
}

Expand Down Expand Up @@ -270,6 +274,20 @@ class RefinementList<TTemplates extends Templates> extends Component<
}
}

/**
* This sets focus on the last refined input element after a render
* because Preact does not perform it automatically.
* @see https://github.com/preactjs/preact/issues/3242
*/
public componentDidUpdate() {
dhayab marked this conversation as resolved.
Show resolved Hide resolved
this.listRef.current
?.querySelector<HTMLInputElement>(
`input[value="${this.lastRefinedValue}"]`
)
?.focus();
this.lastRefinedValue = undefined;
}

private refineFirstValue() {
const firstValue = this.props.facetValues && this.props.facetValues[0];
if (firstValue) {
Expand Down Expand Up @@ -330,7 +348,7 @@ class RefinementList<TTemplates extends Templates> extends Component<

const facetValues = this.props.facetValues &&
this.props.facetValues.length > 0 && (
<ul className={this.props.cssClasses.list}>
<ul ref={this.listRef} className={this.props.cssClasses.list}>
{this.props.facetValues.map(this._generateFacetItem, this)}
</ul>
);
Expand Down