Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(select components): blur when selecting an option #1419

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

fix(select components): blur when selecting an option #1419

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
de02caf
test(single select): add failing test for blurring when choosing an o…
Mohammer5 Nov 1, 2023
0ec619d
fix(single select): blur when actually blurring the input
Mohammer5 Nov 1, 2023
4e05e2e
chore(single select stories): inline template component
Mohammer5 Nov 2, 2023
7cebbca
fix(select): adjust focus styles after focus element changed
Mohammer5 Nov 8, 2023
e36f8cc
chore(select tests): fix tests after changing blur implementation
Mohammer5 Nov 8, 2023
1e7a1c9
refactor: fix eslint issues
Mohammer5 Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
refactor: fix eslint issues
  • Loading branch information
@Mohammer5
Mohammer5 committed Nov 9, 2023
commit 1e7a1c96eb9f0f1c83a6f60430a1c22d0854bfdf
66 changes: 10 additions & 56 deletions components/select/src/single-select/single-select.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,6 @@ export default {
},
}

const WithOptionsTemplate = () => (
<SingleSelect onChange={onChange}>
<SingleSelectOption value="1" label="option one" />
<SingleSelectOption value="2" label="option two" />
<SingleSelectOption value="3" label="option three" />
</SingleSelect>
)

export const WithOptionsAndOnChange = () => (
<SingleSelect onChange={onChange}>
<SingleSelectOption value="1" label="option one" />
Expand Down Expand Up @@ -101,11 +93,7 @@ export const WithOnFocus = () => (
WithOnFocus.storyName = 'With onFocus'

export const WithOnBlur = () => (
<SingleSelect
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
>
<SingleSelect onChange={onChange} onFocus={onFocus} onBlur={onBlur}>
<SingleSelectOption value="1" label="option one" />
<SingleSelectOption value="2" label="option two" />
<SingleSelectOption value="3" label="option three" />
Expand Down Expand Up @@ -137,11 +125,7 @@ export const WithInvalidOptions = (args) => (
)

export const WithInvalidFilterableOptions = () => (
<SingleSelect
filterable
noMatchText="No match found"
onChange={onChange}
>
<SingleSelect filterable noMatchText="No match found" onChange={onChange}>
<div>invalid one</div>
<SingleSelectOption value="1" label="option one" />
<div>invalid two</div>
Expand All @@ -158,11 +142,7 @@ WithInitialFocus.parameters = { docs: { disable: true } }
WithInitialFocus.storyName = 'With initialFocus'

export const Dense = () => (
<SingleSelect
dense
placeholder="Dense sized select"
onChange={onChange}
>
<SingleSelect dense placeholder="Dense sized select" onChange={onChange}>
<SingleSelectOption value="1" label="option one" />
<SingleSelectOption value="2" label="option two" />
<SingleSelectOption value="3" label="option three" />
Expand All @@ -172,10 +152,7 @@ export const Dense = () => (
export const Empty = () => <SingleSelect onChange={onChange} />

export const EmptyWithEmptyText = () => (
<SingleSelect
onChange={onChange}
empty="Custom empty text"
/>
<SingleSelect onChange={onChange} empty="Custom empty text" />
)

export const EmptyWithEmptyComponent = () => (
Expand All @@ -194,11 +171,7 @@ export const WithOptionsAndLoading = () => (
)

export const WithOptionsLoadingAndLoadingText = () => (
<SingleSelect
loading
loadingText="Loading options"
onChange={onChange}
>
<SingleSelect loading loadingText="Loading options" onChange={onChange}>
<SingleSelectOption value="1" label="option one" />
<SingleSelectOption value="2" label="option two" />
<SingleSelectOption value="3" label="option three" />
Expand Down Expand Up @@ -253,11 +226,7 @@ export const WithOptionsAndDisabled = () => (
WithOptionsAndDisabled.storyName = 'With options and disabled'

export const WithOptionsASelectionAndDisabled = () => (
<SingleSelect
disabled
selected="1"
onChange={onChange}
>
<SingleSelect disabled selected="1" onChange={onChange}>
<SingleSelectOption value="1" label="option one" />
<SingleSelectOption value="2" label="option two" />
<SingleSelectOption value="3" label="option three" />
Expand All @@ -267,22 +236,15 @@ WithOptionsASelectionAndDisabled.storyName =
'With options, a selection and disabled'

export const WithPrefix = () => (
<SingleSelect
prefix="Prefix text"
onChange={onChange}
>
<SingleSelect prefix="Prefix text" onChange={onChange}>
<SingleSelectOption value="1" label="option one" />
<SingleSelectOption value="2" label="option two" />
<SingleSelectOption value="3" label="option three" />
</SingleSelect>
)

export const WithPrefixAndSelection = () => (
<SingleSelect
selected="1"
prefix="Prefix text"
onChange={onChange}
>
<SingleSelect selected="1" prefix="Prefix text" onChange={onChange}>
<SingleSelectOption value="1" label="option one" />
<SingleSelectOption value="2" label="option two" />
<SingleSelectOption value="3" label="option three" />
Expand Down Expand Up @@ -315,10 +277,7 @@ export const WithRTL = () => {
WithRTL.storyName = 'RTL Text'

export const WithPlaceholder = () => (
<SingleSelect
placeholder="Placeholder text"
onChange={onChange}
>
<SingleSelect placeholder="Placeholder text" onChange={onChange}>
<SingleSelectOption value="1" label="option one" />
<SingleSelectOption value="2" label="option two" />
<SingleSelectOption value="3" label="option three" />
Expand Down Expand Up @@ -348,12 +307,7 @@ export const WithDisabledOptionAndOnChange = () => (
WithDisabledOptionAndOnChange.storyName = 'With disabled option and onChange'

export const WithClearButtonSelectionAndOnChange = () => (
<SingleSelect
clearable
selected="1"
clearText="Clear"
onChange={onChange}
>
<SingleSelect clearable selected="1" clearText="Clear" onChange={onChange}>
<SingleSelectOption value="1" label="option one" />
<SingleSelectOption value="2" label="option two" />
<SingleSelectOption value="3" label="option three" />
Expand Down
Loading