+import { Choice } from "@utils/types";
import classNames from "classnames";
import {
ChangeEvent,
linkEvent,
RefObject,
} from "inferno";
-import { i18n } from "../../i18next";
-import { Choice } from "../../utils";
+import { I18NextService } from "../../services";
import { Icon, Spinner } from "./icon";
interface SearchableSelectProps {
const { searchText, selectedIndex, loadingEllipses } = this.state;
return (
- <div className="dropdown">
+ <div className="searchable-select dropdown col-12 col-sm-auto flex-grow-1">
<button
id={id}
type="button"
+ role="combobox"
className="form-select d-inline-block text-start"
aria-haspopup="listbox"
+ aria-controls="searchable-select-input"
+ aria-activedescendant={options[selectedIndex].label}
+ aria-expanded={false}
data-bs-toggle="dropdown"
onClick={linkEvent(this, focusSearch)}
ref={this.toggleButtonRef}
>
{loading
- ? `${i18n.t("loading")}${loadingEllipses}`
+ ? `${I18NextService.i18n.t("loading")}${loadingEllipses}`
: options[selectedIndex].label}
</button>
- <div
- role="combobox"
- aria-activedescendant={options[selectedIndex].label}
- className="modlog-choices-font-size dropdown-menu w-100 p-2"
- >
+ <div className="modlog-choices-font-size dropdown-menu w-100 p-2">
<div className="input-group">
<span className="input-group-text">
{loading ? <Spinner /> : <Icon icon="search" />}
</span>
<input
type="text"
+ id="searchable-select-input"
className="form-control"
ref={this.searchInputRef}
onInput={linkEvent(this, handleSearch)}
value={searchText}
- placeholder={`${i18n.t("search")}...`}
+ placeholder={`${I18NextService.i18n.t("search")}...`}
/>
</div>
{!loading &&