});
}
+function focusSearch(i: SearchableSelect) {
+ if (i.toggleButtonRef.current?.ariaExpanded !== "true") {
+ i.searchInputRef.current?.focus();
+
+ if (i.props.onSearch) {
+ i.props.onSearch("");
+ }
+
+ i.setState({
+ searchText: "",
+ });
+ }
+}
+
+function handleChange({ option, i }: { option: Choice; i: SearchableSelect }) {
+ const { onChange, value } = i.props;
+
+ if (option.value !== value?.toString()) {
+ if (onChange) {
+ onChange(option);
+ }
+
+ i.setState({ searchText: "" });
+ }
+}
+
export class SearchableSelect extends Component<
SearchableSelectProps,
SearchableSelectState
> {
- private searchInputRef: RefObject<HTMLInputElement> = createRef();
- private toggleButtonRef: RefObject<HTMLButtonElement> = createRef();
+ searchInputRef: RefObject<HTMLInputElement> = createRef();
+ toggleButtonRef: RefObject<HTMLButtonElement> = createRef();
private loadingEllipsesInterval?: NodeJS.Timer = undefined;
state: SearchableSelectState = {
constructor(props: SearchableSelectProps, context: any) {
super(props, context);
- this.handleChange = this.handleChange.bind(this);
- this.focusSearch = this.focusSearch.bind(this);
-
if (props.value) {
let selectedIndex = props.options.findIndex(
({ value }) => value === props.value?.toString()
const { searchText, selectedIndex, loadingEllipses } = this.state;
return (
- <div className="dropdown">
+ <div className="searchable-select dropdown">
<button
id={id}
type="button"
- className="custom-select text-start"
+ className="form-select d-inline-block text-start"
aria-haspopup="listbox"
data-bs-toggle="dropdown"
- onClick={this.focusSearch}
+ onClick={linkEvent(this, focusSearch)}
+ ref={this.toggleButtonRef}
>
{loading
? `${i18n.t("loading")}${loadingEllipses}`
aria-disabled={option.disabled}
disabled={option.disabled}
aria-selected={selectedIndex === index}
- onClick={() => this.handleChange(option)}
+ onClick={linkEvent({ i: this, option }, handleChange)}
type="button"
>
{option.label}
);
}
- focusSearch() {
- if (this.toggleButtonRef.current?.ariaExpanded !== "true") {
- this.searchInputRef.current?.focus();
-
- if (this.props.onSearch) {
- this.props.onSearch("");
- }
-
- this.setState({
- searchText: "",
- });
- }
- }
-
static getDerivedStateFromProps({
value,
options,
clearInterval(this.loadingEllipsesInterval);
}
}
-
- handleChange(option: Choice) {
- const { onChange, value } = this.props;
-
- if (option.value !== value?.toString()) {
- if (onChange) {
- onChange(option);
- }
-
- this.setState({ searchText: "" });
- }
- }
}