Skip to content

Commit

Permalink
fix(react): allow selectfield to not be searchable
Browse files Browse the repository at this point in the history
  • Loading branch information
@dackmin
dackmin committed Nov 28, 2022
1 parent f904d60 commit 6a07901
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 33 deletions.
17 changes: 12 additions & 5 deletions packages/react/lib/SelectField/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const SelectField = forwardRef(({
disabled = false,
multiple = false,
noOptionsLabel = 'No options',
searchable = true,
searchMinCharacters = 2,
searchThreshold = 400,
required = false,
Expand Down Expand Up @@ -168,10 +169,15 @@ const SelectField = forwardRef(({
}

state.valid = onValidate(parseValue(state.value), { required, multiple });

onChange_({ close: false, resetSearch: true });
};

const onSearchInputChange = e => {
if (!searchable || disabled) {
return;
}

dispatch({ search: e.target.value });
};

Expand All @@ -181,7 +187,7 @@ const SelectField = forwardRef(({
if (onSearch) {
dispatch({ searching: true });
results = await onSearch(state.search);
} else {
} else if (searchable) {
results = filterOptions(state.search);
}

Expand Down Expand Up @@ -245,7 +251,7 @@ const SelectField = forwardRef(({
if (state.selectedItem >= 0) {
onRemoveOption(state.value[state.selectedItem]);
} else {
dispatch({ selectedItem: state.value.length - 1 });
dispatch({ selectedItem: (state.value?.length ?? 0) - 1 });
}

break;
Expand All @@ -254,13 +260,13 @@ const SelectField = forwardRef(({
if (state.selectedItem > 0) {
dispatch({ selectedItem: state.selectedItem - 1 });
} else if (state.selectedItem === -1 && !state.search) {
dispatch({ selectedItem: state.value.length - 1 });
dispatch({ selectedItem: (state.value?.length ?? 0) - 1 });
}

break;

case 'ArrowRight':
if (state.selectedItem < state.value.length - 1) {
if (state.selectedItem < (state.value?.length ?? 0) - 1) {
dispatch({ selectedItem: state.selectedItem + 1 });
} else if (state.selectedItem !== -1) {
dispatch({ selectedItem: -1 });
Expand Down Expand Up @@ -379,6 +385,7 @@ const SelectField = forwardRef(({
state.dirty ? 'dirty' : 'pristine',
!state.valid && state.dirty ? 'invalid' : 'valid',
{
searchable,
searching: state.searching,
empty: isEmpty(),
focused: state.focused,
Expand Down Expand Up @@ -417,7 +424,7 @@ const SelectField = forwardRef(({
onChange={onSearchInputChange}
ref={searchInputRef}
autoFocus={autoFocus}
disabled={disabled}
disabled={disabled || !searchable}
onFocus={onFocus_}
onBlur={onBlur_}
onKeyPress={onKeyPress_}
Expand Down
12 changes: 10 additions & 2 deletions packages/react/lib/SelectField/index.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,21 @@ export const controlled = () => {
value={value}
placeholder="Type a name"
options={['Item 1', 'Item 2', { title: 'Item 3', value: 'item-3' }]}
parseTitle={o => o.title || o}
parseValue={o => o.value || o}
parseTitle={o => o?.title || o}
parseValue={o => o?.value || o}
onChange={field => setValue(field.value)}
/>
);
};

export const notSearchable = () => (
<SelectField
searchable={false}
placeholder="Type a name"
options={['Item 1', 'Item 2', 'Item 3']}
/>
);

export const autoFocused = () => (
<SelectField
autoFocus
Expand Down
52 changes: 26 additions & 26 deletions packages/react/lib/SelectField/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`<SelectField /> should allow arbitrary values 1`] = `
<div>
<div
class="junipero dropdown select-field dirty valid focused multiple"
class="junipero dropdown select-field dirty valid searchable focused multiple"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -78,7 +78,7 @@ exports[`<SelectField /> should allow to be used with a FieldControl 1`] = `
Name
</label>
<div
class="junipero dropdown select-field dirty invalid"
class="junipero dropdown select-field dirty invalid searchable"
id="name"
>
<div
Expand Down Expand Up @@ -132,7 +132,7 @@ exports[`<SelectField /> should allow to be used with a FieldControl 1`] = `
exports[`<SelectField /> should allow to clear a single value 1`] = `
<div>
<div
class="junipero dropdown select-field pristine valid"
class="junipero dropdown select-field pristine valid searchable"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -180,7 +180,7 @@ exports[`<SelectField /> should allow to clear a single value 1`] = `
exports[`<SelectField /> should allow to clear a single value 2`] = `
<div>
<div
class="junipero dropdown select-field dirty valid empty"
class="junipero dropdown select-field dirty valid searchable empty"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -216,7 +216,7 @@ exports[`<SelectField /> should allow to clear a single value 2`] = `
exports[`<SelectField /> should allow to clear multiple values at once 1`] = `
<div>
<div
class="junipero dropdown select-field pristine valid focused multiple"
class="junipero dropdown select-field pristine valid searchable focused multiple"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -305,7 +305,7 @@ exports[`<SelectField /> should allow to clear multiple values at once 1`] = `
exports[`<SelectField /> should allow to clear multiple values at once 2`] = `
<div>
<div
class="junipero dropdown select-field dirty valid empty focused multiple"
class="junipero dropdown select-field dirty valid searchable empty focused multiple"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -341,7 +341,7 @@ exports[`<SelectField /> should allow to clear multiple values at once 2`] = `
exports[`<SelectField /> should allow to delete items when hitting backspace 1`] = `
<div>
<div
class="junipero dropdown opened select-field pristine valid focused multiple"
class="junipero dropdown opened select-field pristine valid searchable focused multiple"
>
<div
class="field dropdown-toggle opened"
Expand Down Expand Up @@ -471,7 +471,7 @@ exports[`<SelectField /> should allow to delete items when hitting backspace 1`]
exports[`<SelectField /> should allow to delete items when hitting backspace 2`] = `
<div>
<div
class="junipero dropdown opened select-field dirty valid focused multiple"
class="junipero dropdown opened select-field dirty valid searchable focused multiple"
>
<div
class="field dropdown-toggle opened"
Expand Down Expand Up @@ -581,7 +581,7 @@ exports[`<SelectField /> should allow to delete items when hitting backspace 2`]
exports[`<SelectField /> should allow to delete items when hitting backspace 3`] = `
<div>
<div
class="junipero dropdown opened select-field dirty valid focused multiple"
class="junipero dropdown opened select-field dirty valid searchable focused multiple"
>
<div
class="field dropdown-toggle opened"
Expand Down Expand Up @@ -691,7 +691,7 @@ exports[`<SelectField /> should allow to delete items when hitting backspace 3`]
exports[`<SelectField /> should allow to delete items when hitting backspace 4`] = `
<div>
<div
class="junipero dropdown opened select-field dirty valid focused multiple"
class="junipero dropdown opened select-field dirty valid searchable focused multiple"
>
<div
class="field dropdown-toggle opened"
Expand Down Expand Up @@ -801,7 +801,7 @@ exports[`<SelectField /> should allow to delete items when hitting backspace 4`]
exports[`<SelectField /> should allow to delete items when hitting backspace 5`] = `
<div>
<div
class="junipero dropdown opened select-field dirty valid focused multiple"
class="junipero dropdown opened select-field dirty valid searchable focused multiple"
>
<div
class="field dropdown-toggle opened"
Expand Down Expand Up @@ -911,7 +911,7 @@ exports[`<SelectField /> should allow to delete items when hitting backspace 5`]
exports[`<SelectField /> should allow to delete items when hitting backspace 6`] = `
<div>
<div
class="junipero dropdown opened select-field dirty valid focused multiple"
class="junipero dropdown opened select-field dirty valid searchable focused multiple"
>
<div
class="field dropdown-toggle opened"
Expand Down Expand Up @@ -1021,7 +1021,7 @@ exports[`<SelectField /> should allow to delete items when hitting backspace 6`]
exports[`<SelectField /> should allow to render without a placeholder 1`] = `
<div>
<div
class="junipero dropdown select-field pristine valid empty"
class="junipero dropdown select-field pristine valid searchable empty"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -1056,7 +1056,7 @@ exports[`<SelectField /> should allow to render without a placeholder 1`] = `
exports[`<SelectField /> should allow to reset the field 1`] = `
<div>
<div
class="junipero dropdown select-field dirty valid"
class="junipero dropdown select-field dirty valid searchable"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -1104,7 +1104,7 @@ exports[`<SelectField /> should allow to reset the field 1`] = `
exports[`<SelectField /> should allow to reset the field 2`] = `
<div>
<div
class="junipero dropdown select-field pristine valid"
class="junipero dropdown select-field pristine valid searchable"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -1152,7 +1152,7 @@ exports[`<SelectField /> should allow to reset the field 2`] = `
exports[`<SelectField /> should allow to search for an existing value 1`] = `
<div>
<div
class="junipero dropdown opened select-field pristine valid empty focused"
class="junipero dropdown opened select-field pristine valid searchable empty focused"
>
<div
class="field dropdown-toggle opened"
Expand Down Expand Up @@ -1209,7 +1209,7 @@ exports[`<SelectField /> should allow to search for an existing value 1`] = `
exports[`<SelectField /> should allow to search for an existing value 2`] = `
<div>
<div
class="junipero dropdown opened select-field pristine valid empty focused"
class="junipero dropdown opened select-field pristine valid searchable empty focused"
>
<div
class="field dropdown-toggle opened"
Expand Down Expand Up @@ -1280,7 +1280,7 @@ exports[`<SelectField /> should allow to search for an existing value 2`] = `
exports[`<SelectField /> should allow to search for an external value 1`] = `
<div>
<div
class="junipero dropdown opened select-field pristine valid empty focused"
class="junipero dropdown opened select-field pristine valid searchable empty focused"
>
<div
class="field dropdown-toggle opened"
Expand Down Expand Up @@ -1337,7 +1337,7 @@ exports[`<SelectField /> should allow to search for an external value 1`] = `
exports[`<SelectField /> should allow to search for an external value 2`] = `
<div>
<div
class="junipero dropdown select-field dirty valid focused"
class="junipero dropdown select-field dirty valid searchable focused"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -1389,7 +1389,7 @@ exports[`<SelectField /> should allow to use object options and display custom t
item-3
</p>
<div
class="junipero dropdown select-field dirty valid"
class="junipero dropdown select-field dirty valid searchable"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -1437,7 +1437,7 @@ exports[`<SelectField /> should allow to use object options and display custom t
exports[`<SelectField /> should be invalid if validation fails 1`] = `
<div>
<div
class="junipero dropdown select-field dirty invalid"
class="junipero dropdown select-field dirty invalid searchable"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -1485,7 +1485,7 @@ exports[`<SelectField /> should be invalid if validation fails 1`] = `
exports[`<SelectField /> should not allow to change value when disabled 1`] = `
<div>
<div
class="junipero dropdown disabled select-field pristine valid"
class="junipero dropdown disabled select-field pristine valid searchable"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -1533,7 +1533,7 @@ exports[`<SelectField /> should not allow to change value when disabled 1`] = `
exports[`<SelectField /> should render 1`] = `
<div>
<div
class="junipero dropdown opened select-field pristine valid empty focused"
class="junipero dropdown opened select-field pristine valid searchable empty focused"
>
<div
class="field dropdown-toggle opened"
Expand Down Expand Up @@ -1604,7 +1604,7 @@ exports[`<SelectField /> should render 1`] = `
exports[`<SelectField /> should render multiple values 1`] = `
<div>
<div
class="junipero dropdown select-field pristine valid focused multiple"
class="junipero dropdown select-field pristine valid searchable focused multiple"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -1693,7 +1693,7 @@ exports[`<SelectField /> should render multiple values 1`] = `
exports[`<SelectField /> should render multiple values 2`] = `
<div>
<div
class="junipero dropdown select-field dirty valid focused multiple"
class="junipero dropdown select-field dirty valid searchable focused multiple"
>
<div
class="field dropdown-toggle"
Expand Down Expand Up @@ -1762,7 +1762,7 @@ exports[`<SelectField /> should render multiple values 2`] = `
exports[`<SelectField /> should render multiple values 3`] = `
<div>
<div
class="junipero dropdown select-field dirty valid focused multiple"
class="junipero dropdown select-field dirty valid searchable focused multiple"
>
<div
class="field dropdown-toggle"
Expand Down

0 comments on commit 6a07901

Please sign in to comment.