Use linkEvent where appropriate
This commit is contained in:
parent
c6a6c99efe
commit
df2ea3311e
1 changed files with 31 additions and 33 deletions
|
@ -38,12 +38,38 @@ function handleSearch(i: SearchableSelect, e: ChangeEvent<HTMLInputElement>) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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<
|
export class SearchableSelect extends Component<
|
||||||
SearchableSelectProps,
|
SearchableSelectProps,
|
||||||
SearchableSelectState
|
SearchableSelectState
|
||||||
> {
|
> {
|
||||||
private searchInputRef: RefObject<HTMLInputElement> = createRef();
|
searchInputRef: RefObject<HTMLInputElement> = createRef();
|
||||||
private toggleButtonRef: RefObject<HTMLButtonElement> = createRef();
|
toggleButtonRef: RefObject<HTMLButtonElement> = createRef();
|
||||||
private loadingEllipsesInterval?: NodeJS.Timer = undefined;
|
private loadingEllipsesInterval?: NodeJS.Timer = undefined;
|
||||||
|
|
||||||
state: SearchableSelectState = {
|
state: SearchableSelectState = {
|
||||||
|
@ -55,9 +81,6 @@ export class SearchableSelect extends Component<
|
||||||
constructor(props: SearchableSelectProps, context: any) {
|
constructor(props: SearchableSelectProps, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.handleChange = this.handleChange.bind(this);
|
|
||||||
this.focusSearch = this.focusSearch.bind(this);
|
|
||||||
|
|
||||||
if (props.value) {
|
if (props.value) {
|
||||||
let selectedIndex = props.options.findIndex(
|
let selectedIndex = props.options.findIndex(
|
||||||
({ value }) => value === props.value?.toString()
|
({ value }) => value === props.value?.toString()
|
||||||
|
@ -86,7 +109,8 @@ export class SearchableSelect extends Component<
|
||||||
className="custom-select text-start"
|
className="custom-select text-start"
|
||||||
aria-haspopup="listbox"
|
aria-haspopup="listbox"
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
onClick={this.focusSearch}
|
onClick={linkEvent(this, focusSearch)}
|
||||||
|
ref={this.toggleButtonRef}
|
||||||
>
|
>
|
||||||
{loading
|
{loading
|
||||||
? `${i18n.t("loading")}${loadingEllipses}`
|
? `${i18n.t("loading")}${loadingEllipses}`
|
||||||
|
@ -127,7 +151,7 @@ export class SearchableSelect extends Component<
|
||||||
aria-disabled={option.disabled}
|
aria-disabled={option.disabled}
|
||||||
disabled={option.disabled}
|
disabled={option.disabled}
|
||||||
aria-selected={selectedIndex === index}
|
aria-selected={selectedIndex === index}
|
||||||
onClick={() => this.handleChange(option)}
|
onClick={linkEvent({ i: this, option }, handleChange)}
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
{option.label}
|
{option.label}
|
||||||
|
@ -138,20 +162,6 @@ export class SearchableSelect extends Component<
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
focusSearch() {
|
|
||||||
if (this.toggleButtonRef.current?.ariaExpanded !== "true") {
|
|
||||||
this.searchInputRef.current?.focus();
|
|
||||||
|
|
||||||
if (this.props.onSearch) {
|
|
||||||
this.props.onSearch("");
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
searchText: "",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static getDerivedStateFromProps({
|
static getDerivedStateFromProps({
|
||||||
value,
|
value,
|
||||||
options,
|
options,
|
||||||
|
@ -189,16 +199,4 @@ export class SearchableSelect extends Component<
|
||||||
clearInterval(this.loadingEllipsesInterval);
|
clearInterval(this.loadingEllipsesInterval);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange(option: Choice) {
|
|
||||||
const { onChange, value } = this.props;
|
|
||||||
|
|
||||||
if (option.value !== value?.toString()) {
|
|
||||||
if (onChange) {
|
|
||||||
onChange(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({ searchText: "" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue