Skip to content
This repository was archived by the owner on Mar 25, 2025. It is now read-only.

Commit aeb9a5b

Browse files
scharingerTigge
scharinger
authored and
Tigge
committed
feat(multiSelect): remove selected options with keyboard
Add `Enter` key down event listeners on the remove icons. So that the control can be controlled with keyboard and not require a mouse.
1 parent 8cc235d commit aeb9a5b

File tree

3 files changed

+47
-6
lines changed

3 files changed

+47
-6
lines changed

‎packages/core/src/Chip/index.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export * from './BaseChip'
22

3-
import React, { useMemo } from 'react'
3+
import React, { useCallback, useMemo } from 'react'
44
import styled from 'styled-components'
55

66
import { CloseIcon } from 'practical-react-components-icons'
@@ -42,18 +42,34 @@ export interface ChipProps
4242
* Function to call if remove icon is pressed. Remove icon
4343
* only visible if this prop is set.
4444
*/
45-
readonly onRemove?: (e: React.MouseEvent) => void
45+
readonly onRemove?: () => void
4646
}
4747

4848
/* eslint-disable-next-line react/display-name */
4949
export const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
5050
({ text, error = false, onRemove, icon, ...props }, ref) => {
51+
const handleKeyDown = useCallback(
52+
(event: React.KeyboardEvent<HTMLSpanElement>) => {
53+
if (onRemove === undefined) {
54+
return
55+
}
56+
57+
if (event.key === 'Enter') {
58+
event.stopPropagation()
59+
onRemove()
60+
}
61+
},
62+
[onRemove]
63+
)
64+
5165
const component = useMemo(() => {
5266
return (
5367
<>
5468
{!error && icon !== undefined ? <ChipIcon icon={icon} /> : null}
5569
<Typography variant="chip-tag-text">{text}</Typography>
56-
{onRemove ? <ChipRemoveIcon onClick={onRemove} /> : null}
70+
{onRemove ? (
71+
<ChipRemoveIcon onClick={onRemove} onKeyDown={handleKeyDown} />
72+
) : null}
5773
</>
5874
)
5975
}, [text, error, icon, onRemove])

‎packages/core/src/Select/MultiSelect.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,15 @@ export function MultiSelect<V extends string = string>({
8484
},
8585
[onChange]
8686
)
87+
const handleRemoveAllKeyDown = useCallback(
88+
(event: React.KeyboardEvent<HTMLSpanElement>) => {
89+
if (event.key === 'Enter') {
90+
event.stopPropagation()
91+
onChange?.([])
92+
}
93+
},
94+
[onChange]
95+
)
8796

8897
const onMultiChange = useCallback(
8998
nextValue => onChange?.([...value, nextValue]),
@@ -95,8 +104,7 @@ export function MultiSelect<V extends string = string>({
95104
() =>
96105
value.map(v => ({
97106
label: options.find(option => option.value === v)?.label ?? '',
98-
onRemove: (e: React.MouseEvent) => {
99-
e.stopPropagation()
107+
onRemove: () => {
100108
onChange?.(value.filter(v2 => v2 !== v))
101109
},
102110
})),
@@ -124,12 +132,13 @@ export function MultiSelect<V extends string = string>({
124132
size="small"
125133
icon={CloseIcon}
126134
onClick={onRemoveAllClick}
135+
onKeyDown={handleRemoveAllKeyDown}
127136
/>
128137
</IconsContainer>
129138
<Divider />
130139
</SelectInsideContainer>
131140
)
132-
}, [chips, onRemoveAllClick, placeholder, value])
141+
}, [chips, onRemoveAllClick, handleRemoveAllKeyDown, placeholder, value])
133142

134143
const notSelectedOptions = useMemo(
135144
() =>

‎packages/core/src/Select/__snapshots__/MultiSelect.test.tsx.snap‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,7 @@ exports[`Select Direction 1`] = `
304304
<span
305305
className="c11 c12 c13"
306306
onClick={[Function]}
307+
onKeyDown={[Function]}
307308
role="img"
308309
size="small"
309310
tabIndex={0}
@@ -331,6 +332,7 @@ exports[`Select Direction 1`] = `
331332
<span
332333
className="c11 c12"
333334
onClick={[Function]}
335+
onKeyDown={[Function]}
334336
role="img"
335337
size="small"
336338
tabIndex={0}
@@ -697,6 +699,7 @@ exports[`Select Direction 2`] = `
697699
<span
698700
className="c11 c12 c13"
699701
onClick={[Function]}
702+
onKeyDown={[Function]}
700703
role="img"
701704
size="small"
702705
tabIndex={0}
@@ -724,6 +727,7 @@ exports[`Select Direction 2`] = `
724727
<span
725728
className="c11 c12"
726729
onClick={[Function]}
730+
onKeyDown={[Function]}
727731
role="img"
728732
size="small"
729733
tabIndex={0}
@@ -1097,6 +1101,7 @@ exports[`Select Other 1`] = `
10971101
<span
10981102
className="c11 c12 c13"
10991103
onClick={[Function]}
1104+
onKeyDown={[Function]}
11001105
role="img"
11011106
size="small"
11021107
tabIndex={0}
@@ -1124,6 +1129,7 @@ exports[`Select Other 1`] = `
11241129
<span
11251130
className="c11 c12"
11261131
onClick={[Function]}
1132+
onKeyDown={[Function]}
11271133
role="img"
11281134
size="small"
11291135
tabIndex={0}
@@ -1504,6 +1510,7 @@ exports[`Select Other 2`] = `
15041510
<span
15051511
className="c11 c12 c13"
15061512
onClick={[Function]}
1513+
onKeyDown={[Function]}
15071514
role="img"
15081515
size="small"
15091516
tabIndex={0}
@@ -1531,6 +1538,7 @@ exports[`Select Other 2`] = `
15311538
<span
15321539
className="c11 c12"
15331540
onClick={[Function]}
1541+
onKeyDown={[Function]}
15341542
role="img"
15351543
size="small"
15361544
tabIndex={0}
@@ -1897,6 +1905,7 @@ exports[`Select Width 1`] = `
18971905
<span
18981906
className="c11 c12 c13"
18991907
onClick={[Function]}
1908+
onKeyDown={[Function]}
19001909
role="img"
19011910
size="small"
19021911
tabIndex={0}
@@ -1924,6 +1933,7 @@ exports[`Select Width 1`] = `
19241933
<span
19251934
className="c11 c12"
19261935
onClick={[Function]}
1936+
onKeyDown={[Function]}
19271937
role="img"
19281938
size="small"
19291939
tabIndex={0}
@@ -2290,6 +2300,7 @@ exports[`Select Width 2`] = `
22902300
<span
22912301
className="c11 c12 c13"
22922302
onClick={[Function]}
2303+
onKeyDown={[Function]}
22932304
role="img"
22942305
size="small"
22952306
tabIndex={0}
@@ -2322,6 +2333,7 @@ exports[`Select Width 2`] = `
23222333
<span
23232334
className="c11 c12 c13"
23242335
onClick={[Function]}
2336+
onKeyDown={[Function]}
23252337
role="img"
23262338
size="small"
23272339
tabIndex={0}
@@ -2349,6 +2361,7 @@ exports[`Select Width 2`] = `
23492361
<span
23502362
className="c11 c12"
23512363
onClick={[Function]}
2364+
onKeyDown={[Function]}
23522365
role="img"
23532366
size="small"
23542367
tabIndex={0}
@@ -2715,6 +2728,7 @@ exports[`Select Width 3`] = `
27152728
<span
27162729
className="c11 c12 c13"
27172730
onClick={[Function]}
2731+
onKeyDown={[Function]}
27182732
role="img"
27192733
size="small"
27202734
tabIndex={0}
@@ -2747,6 +2761,7 @@ exports[`Select Width 3`] = `
27472761
<span
27482762
className="c11 c12 c13"
27492763
onClick={[Function]}
2764+
onKeyDown={[Function]}
27502765
role="img"
27512766
size="small"
27522767
tabIndex={0}
@@ -2774,6 +2789,7 @@ exports[`Select Width 3`] = `
27742789
<span
27752790
className="c11 c12"
27762791
onClick={[Function]}
2792+
onKeyDown={[Function]}
27772793
role="img"
27782794
size="small"
27792795
tabIndex={0}

0 commit comments

Comments
 (0)