mirror of
https://github.com/prymitive/karma
synced 2026-05-05 03:16:51 +00:00
Merge pull request #373 from prymitive/autocomplete-position
fix(ui): align autocomplete dropdown with the input
This commit is contained in:
Łukasz Mierzwa
GitHub
@@ -1,7 +1,7 @@
|
||||
const AutosuggestTheme = {
|
||||
container: "autosuggest d-inline-block w-100",
|
||||
container: "autosuggest d-inline-block",
|
||||
suggestionsContainer: "dropdown",
|
||||
suggestionsList: "dropdown-menu dropdown-menu-right show",
|
||||
suggestionsList: "dropdown-menu show",
|
||||
suggestion: "dropdown-item cursor-pointer",
|
||||
suggestionFocused: "active",
|
||||
suggestionHighlighted: "active"
|
||||
|
||||
@@ -2,67 +2,68 @@
|
||||
|
||||
exports[`<FilterInput /> matches snapshot on default render 1`] = `
|
||||
"
|
||||
<div role=\\"combobox\\"
|
||||
aria-haspopup=\\"listbox\\"
|
||||
aria-owns=\\"react-autowhatever-1\\"
|
||||
aria-expanded=\\"false\\"
|
||||
class=\\"autosuggest d-inline-block w-100\\"
|
||||
>
|
||||
<div class=\\"input-group mr-2\\">
|
||||
<div class=\\"input-group-prepend\\">
|
||||
<span class=\\"input-group-text px-2\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"search\\"
|
||||
class=\\"svg-inline--fa fa-search fa-w-16 \\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 512 512\\"
|
||||
<div class=\\"input-group w-100 mr-2\\">
|
||||
<div class=\\"input-group-prepend\\">
|
||||
<span class=\\"input-group-text px-2\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"search\\"
|
||||
class=\\"svg-inline--fa fa-search fa-w-16 \\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 512 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class=\\"form-control p-1 components-filterinput\\">
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class=\\"form-control p-1 components-filterinput\\">
|
||||
<div role=\\"combobox\\"
|
||||
aria-haspopup=\\"listbox\\"
|
||||
aria-owns=\\"react-autowhatever-1\\"
|
||||
aria-expanded=\\"false\\"
|
||||
class=\\"autosuggest d-inline-block\\"
|
||||
>
|
||||
<input type=\\"text\\"
|
||||
class=\\"components-filterinput-wrapper\\"
|
||||
placeholder
|
||||
size=\\"1\\"
|
||||
value
|
||||
autocomplete=\\"off\\"
|
||||
aria-autocomplete=\\"list\\"
|
||||
aria-controls=\\"react-autowhatever-1\\"
|
||||
>
|
||||
</div>
|
||||
<div class=\\"input-group-append\\">
|
||||
<button class=\\"input-group-text rounded-right cursor-pointer components-navbar-history px-2\\"
|
||||
type=\\"button\\"
|
||||
data-toggle=\\"dropdown\\"
|
||||
aria-haspopup=\\"true\\"
|
||||
aria-expanded=\\"true\\"
|
||||
<div id=\\"react-autowhatever-1\\"
|
||||
role=\\"listbox\\"
|
||||
class=\\"dropdown\\"
|
||||
>
|
||||
<svg aria-hidden=\\"true\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"caret-down\\"
|
||||
class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 320 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id=\\"react-autowhatever-1\\"
|
||||
role=\\"listbox\\"
|
||||
class=\\"dropdown\\"
|
||||
>
|
||||
<div class=\\"input-group-append\\">
|
||||
<button class=\\"input-group-text rounded-right cursor-pointer components-navbar-history px-2\\"
|
||||
type=\\"button\\"
|
||||
data-toggle=\\"dropdown\\"
|
||||
aria-haspopup=\\"true\\"
|
||||
aria-expanded=\\"true\\"
|
||||
>
|
||||
<svg aria-hidden=\\"true\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"caret-down\\"
|
||||
class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 320 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
|
||||
@@ -11,11 +11,3 @@ input.components-filterinput-wrapper {
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input.components-filterinput-wrapper {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
input.components-filterinput-wrapper:focus {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@@ -115,43 +115,14 @@ const FilterInput = observer(
|
||||
};
|
||||
|
||||
renderInputComponent = inputProps => {
|
||||
var {
|
||||
inputReference,
|
||||
alertStore,
|
||||
settingsStore,
|
||||
...otherProps
|
||||
} = inputProps;
|
||||
|
||||
const { value } = inputProps;
|
||||
return (
|
||||
<div className="input-group mr-2">
|
||||
<div className="input-group-prepend">
|
||||
<span className="input-group-text px-2">
|
||||
<FontAwesomeIcon icon={faSearch} />
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="form-control p-1 components-filterinput"
|
||||
onClick={event => {
|
||||
this.onInputClick(inputReference, event);
|
||||
}}
|
||||
>
|
||||
{alertStore.filters.values.map(filter => (
|
||||
<FilterInputLabel
|
||||
key={filter.raw}
|
||||
alertStore={alertStore}
|
||||
filter={filter}
|
||||
/>
|
||||
))}
|
||||
<input
|
||||
className="components-filterinput-wrapper"
|
||||
placeholder=""
|
||||
{...otherProps}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-group-append">
|
||||
<History alertStore={alertStore} settingsStore={settingsStore} />
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
className="components-filterinput-wrapper"
|
||||
placeholder=""
|
||||
size={value.length + 1}
|
||||
{...inputProps}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -166,25 +137,48 @@ const FilterInput = observer(
|
||||
onSubmit={this.onSubmit}
|
||||
data-filters={alertStore.filters.values.map(f => f.raw).join(" ")}
|
||||
>
|
||||
<Autosuggest
|
||||
ref={this.inputStore.storeInputReference}
|
||||
suggestions={this.inputStore.suggestions}
|
||||
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
|
||||
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
|
||||
onSuggestionSelected={this.onSuggestionSelected}
|
||||
shouldRenderSuggestions={value => value && value.trim().length > 1}
|
||||
getSuggestionValue={suggestion => suggestion}
|
||||
renderSuggestion={this.renderSuggestion}
|
||||
renderInputComponent={this.renderInputComponent}
|
||||
inputProps={{
|
||||
value: this.inputStore.value,
|
||||
onChange: this.onChange,
|
||||
inputReference: this.inputStore.ref,
|
||||
alertStore: alertStore,
|
||||
settingsStore: settingsStore
|
||||
}}
|
||||
theme={AutosuggestTheme}
|
||||
/>
|
||||
<div className="input-group w-100 mr-2">
|
||||
<div className="input-group-prepend">
|
||||
<span className="input-group-text px-2">
|
||||
<FontAwesomeIcon icon={faSearch} />
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="form-control p-1 components-filterinput"
|
||||
onClick={event => {
|
||||
this.onInputClick(this.inputStore.ref, event);
|
||||
}}
|
||||
>
|
||||
{alertStore.filters.values.map(filter => (
|
||||
<FilterInputLabel
|
||||
key={filter.raw}
|
||||
alertStore={alertStore}
|
||||
filter={filter}
|
||||
/>
|
||||
))}
|
||||
<Autosuggest
|
||||
ref={this.inputStore.storeInputReference}
|
||||
suggestions={this.inputStore.suggestions}
|
||||
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
|
||||
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
|
||||
onSuggestionSelected={this.onSuggestionSelected}
|
||||
shouldRenderSuggestions={value =>
|
||||
value && value.trim().length > 1
|
||||
}
|
||||
getSuggestionValue={suggestion => suggestion}
|
||||
renderSuggestion={this.renderSuggestion}
|
||||
renderInputComponent={this.renderInputComponent}
|
||||
inputProps={{
|
||||
value: this.inputStore.value,
|
||||
onChange: this.onChange
|
||||
}}
|
||||
theme={AutosuggestTheme}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-group-append">
|
||||
<History alertStore={alertStore} settingsStore={settingsStore} />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user