Skip to content

Commit 4341747

Browse files
jzempeljzempel
authored
fix(combobox): enhance listbox expand/collapse on input mouse click (#1609)
1 parent 0bf835c commit 4341747

File tree

7 files changed

+70
-66
lines changed

7 files changed

+70
-66
lines changed

‎packages/dropdowns.next/.size-snapshot.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
{
22
"index.cjs.js": {
3-
"bundled": 55890,
4-
"minified": 40577,
5-
"gzipped": 9273
3+
"bundled": 55827,
4+
"minified": 40541,
5+
"gzipped": 9265
66
},
77
"index.esm.js": {
8-
"bundled": 51241,
9-
"minified": 36172,
10-
"gzipped": 8697,
8+
"bundled": 51178,
9+
"minified": 36136,
10+
"gzipped": 8689,
1111
"treeshaked": {
1212
"rollup": {
13-
"code": 28490,
13+
"code": 28449,
1414
"import_statements": 1064
1515
},
1616
"webpack": {
17-
"code": 31363
17+
"code": 31324
1818
}
1919
}
2020
}

‎packages/dropdowns.next/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"types": "dist/typings/index.d.ts",
2323
"dependencies": {
2424
"@floating-ui/react-dom": "^2.0.0",
25-
"@zendeskgarden/container-combobox": "^1.0.5",
25+
"@zendeskgarden/container-combobox": "^1.0.6",
2626
"@zendeskgarden/container-utilities": "^1.0.0",
2727
"@zendeskgarden/react-forms": "^8.69.8",
2828
"@zendeskgarden/react-tags": "^8.69.8",

‎packages/dropdowns.next/src/elements/combobox/Combobox.spec.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,15 +163,22 @@ describe('Combobox', () => {
163163
expect(input).toHaveAttribute('type', 'search');
164164
});
165165

166-
it('renders `isAutocomplete` as expected', () => {
166+
it('renders `isAutocomplete` as expected', async () => {
167167
const { getByTestId, rerender } = render(<TestCombobox />);
168+
const trigger = getByTestId('combobox').firstChild as HTMLElement;
168169
const input = getByTestId('input');
169170

171+
await user.click(trigger);
172+
170173
expect(input).not.toHaveAttribute('aria-autocomplete');
174+
expect(input).toHaveAttribute('aria-expanded', 'false');
171175

172176
rerender(<TestCombobox isAutocomplete />);
173177

178+
await user.click(trigger);
179+
174180
expect(input).toHaveAttribute('aria-autocomplete', 'list');
181+
expect(input).toHaveAttribute('aria-expanded', 'true');
175182
});
176183

177184
it('renders `isBare` styling as expected', () => {

‎packages/dropdowns.next/src/elements/combobox/Combobox.tsx‎

Lines changed: 20 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
8181
ref
8282
) => {
8383
const { hasHint, hasMessage, labelProps, setLabelProps } = useFieldContext();
84+
const [isInputHidden, setIsInputHidden] = useState(true);
8485
const [isLabelHovered, setIsLabelHovered] = useState(false);
8586
const [isTagGroupExpanded, setIsTagGroupExpanded] = useState(false);
8687
const [optionTagProps, setOptionTagProps] = useState<Record<string, IOptionProps['tagProps']>>(
@@ -96,7 +97,6 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
9697

9798
return retVal;
9899
}, [children, isMultiselectable]);
99-
const hasFocus = useRef(false);
100100
const triggerRef = useRef<HTMLDivElement>(null);
101101
const inputRef = useRef<HTMLInputElement>(null);
102102
const listboxRef = useRef<HTMLUListElement>(null);
@@ -177,15 +177,19 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
177177
validation,
178178
...(getTriggerProps({
179179
onFocus: () => {
180-
hasFocus.current = true;
180+
if (isEditable) {
181+
setIsInputHidden(false);
182+
}
181183

182184
if (isMultiselectable) {
183185
setIsTagGroupExpanded(true);
184186
}
185187
},
186188
onBlur: event => {
187189
if (event.relatedTarget === null || !triggerRef.current?.contains(event.relatedTarget)) {
188-
hasFocus.current = false;
190+
if (isEditable) {
191+
setIsInputHidden(true);
192+
}
189193

190194
if (isMultiselectable) {
191195
setIsTagGroupExpanded(false);
@@ -196,7 +200,7 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
196200
};
197201
const inputProps = {
198202
'aria-invalid': validation === 'error' || validation === 'warning',
199-
hidden: !(isEditable && hasFocus.current),
203+
hidden: isInputHidden,
200204
isBare,
201205
isCompact,
202206
isEditable,
@@ -253,12 +257,6 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
253257
disabled={isDisabled}
254258
hidden={isTagGroupExpanded}
255259
isCompact={isCompact}
256-
onClick={event => {
257-
if (isEditable) {
258-
event.stopPropagation();
259-
inputRef.current?.focus();
260-
}
261-
}}
262260
tabIndex={-1}
263261
type="button"
264262
>
@@ -273,26 +271,18 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
273271
)}
274272
</TagGroup>
275273
)}
276-
{!(isEditable && hasFocus.current) && (
277-
<StyledValue
278-
isBare={isBare}
279-
isCompact={isCompact}
280-
isDisabled={isDisabled}
281-
isEditable={isEditable}
282-
isMultiselectable={isMultiselectable}
283-
isPlaceholder={!(inputValue || renderValue)}
284-
onClick={event => {
285-
if (isEditable) {
286-
event.stopPropagation();
287-
inputRef.current?.focus();
288-
}
289-
}}
290-
>
291-
{renderValue
292-
? renderValue({ selection, inputValue })
293-
: inputValue || placeholder}
294-
</StyledValue>
295-
)}
274+
<StyledValue
275+
hidden={!isInputHidden}
276+
isAutocomplete={isAutocomplete}
277+
isBare={isBare}
278+
isCompact={isCompact}
279+
isDisabled={isDisabled}
280+
isEditable={isEditable}
281+
isMultiselectable={isMultiselectable}
282+
isPlaceholder={!(inputValue || renderValue)}
283+
>
284+
{renderValue ? renderValue({ selection, inputValue }) : inputValue || placeholder}
285+
</StyledValue>
296286
<StyledInput {...inputProps} />
297287
</StyledInputGroup>
298288
{(hasChevron || endIcon) && (

‎packages/dropdowns.next/src/views/combobox/StyledTagsButton.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ export const StyledTagsButton = styled(StyledValue as 'button').attrs({
3636
'data-garden-id': COMPONENT_ID,
3737
'data-garden-version': PACKAGE_VERSION
3838
})<IStyledTagsButtonProps>`
39+
display: inline-flex;
3940
flex: 0 1 auto; /* [1] */
41+
align-items: center;
4042
border: none; /* [2] */
4143
background-color: transparent; /* [2] */
4244
cursor: pointer;

‎packages/dropdowns.next/src/views/combobox/StyledValue.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { sizeStyles } from './StyledInput';
1212
const COMPONENT_ID = 'dropdowns.combobox.value';
1313

1414
interface IStyledValueProps extends ThemeProps<DefaultTheme> {
15+
isAutocomplete?: boolean;
1516
isBare?: boolean;
1617
isCompact?: boolean;
1718
isDisabled?: boolean;
@@ -39,7 +40,7 @@ export const StyledValue = styled.div.attrs({
3940
return 'default';
4041
}
4142
42-
return props.isEditable ? 'text' : 'pointer';
43+
return props.isEditable && !props.isAutocomplete ? 'text' : 'pointer';
4344
}};
4445
overflow: hidden;
4546
text-overflow: ellipsis;
@@ -50,6 +51,10 @@ export const StyledValue = styled.div.attrs({
5051
5152
${colorStyles};
5253
54+
&[hidden] {
55+
display: none;
56+
}
57+
5358
${props => retrieveComponentStyles(COMPONENT_ID, props)};
5459
`;
5560

‎packages/dropdowns.next/yarn.lock‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,15 @@
4848
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.18.0.tgz#4f3cebe093dd436eeaff633809bf0f68f4f9d2ee"
4949
integrity sha512-KdVMdpTgDyK8FzdKO9SCpiibuy/kbv3pwgfXshTI6tEcQT1OOwj7BAksnzGC0rPz0UholwC+AgkqEl3EJX3M1A==
5050

51-
"@zendeskgarden/container-combobox@^1.0.5":
52-
version "1.0.5"
53-
resolved "https://registry.yarnpkg.com/@zendeskgarden/container-combobox/-/container-combobox-1.0.5.tgz#c167f21905f75bb9cbc5338a5da89368e42d7d7f"
54-
integrity sha512-QnjIdgTk2osFshNEDE+fmO28JpDhU9iBgNBi7f7En8hu67HBkDCHxOiJKjG1d3j1MwyEsYmVDZ+DKqxoXKzBhA==
51+
"@zendeskgarden/container-combobox@^1.0.6":
52+
version "1.0.6"
53+
resolved "https://registry.yarnpkg.com/@zendeskgarden/container-combobox/-/container-combobox-1.0.6.tgz#35cd5fe3e6b22ac5c021fb420363991740ee5db0"
54+
integrity sha512-sZhV/Wx6mvGepnPL//vBkgjmBIGOND5KcHbyi34oTvLvstZqVD9ZdEfM0VXhVk36NlO8aUm7LemYYJ7cY++yeQ==
5555
dependencies:
5656
"@babel/runtime" "^7.8.4"
5757
"@zendeskgarden/container-field" "^3.0.7"
5858
"@zendeskgarden/container-utilities" "^1.0.8"
59-
downshift "^7.6.0"
59+
downshift "^8.0.0"
6060

6161
"@zendeskgarden/container-field@^2.1.0":
6262
version "2.1.2"
@@ -106,10 +106,10 @@
106106
"@babel/runtime" "^7.8.4"
107107
"@reach/auto-id" "^0.18.0"
108108

109-
"@zendeskgarden/react-forms@^8.69.6":
110-
version "8.69.6"
111-
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-forms/-/react-forms-8.69.6.tgz#156f71a932c5fa5c5dcadcf9b735b8cdd56f185e"
112-
integrity sha512-0cQJ7F456ECcVdwK/h2AoycFq9wnSbAQTmxPdmySigpj8ysM1vyzLELZ71gQrvp7QanS0kNkwFUG1ChnT30dGA==
109+
"@zendeskgarden/react-forms@^8.69.7":
110+
version "8.69.7"
111+
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-forms/-/react-forms-8.69.7.tgz#55c4b84c6a472634585cef181b489993cee91f91"
112+
integrity sha512-kvrcPaqDRAaVipxa/8I1P8PVleo6aoANRl1bKJx4Q44sMqNXFPkrKxcm0uHMDMJZUcSCjMv9sCsPuapxLxWquA==
113113
dependencies:
114114
"@zendeskgarden/container-field" "^2.1.0"
115115
"@zendeskgarden/container-slider" "^0.1.1"
@@ -119,30 +119,30 @@
119119
prop-types "^15.5.7"
120120
react-merge-refs "^1.1.0"
121121

122-
"@zendeskgarden/react-tags@^8.69.6":
123-
version "8.69.6"
124-
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tags/-/react-tags-8.69.6.tgz#276ecf8d12197cf77db0feea2abfa535dc8c84b1"
125-
integrity sha512-GShVyNGsVKzglWhE7m9mNuei3KCg57/vY5lz2IHddH9DckAxhQIKyhxSvKOBeTRBos4ql3d3Kza+gp2cdFJosg==
122+
"@zendeskgarden/react-tags@^8.69.7":
123+
version "8.69.7"
124+
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tags/-/react-tags-8.69.7.tgz#a379baa6072486739974c067b89c82c4123e338c"
125+
integrity sha512-14szx+sLlyMfEv8YCi8GT4bIl0pNS1JEy3uiRfbhvcTd2n/WL8JscE6J81zwputHI2S8YUSXsnUt39NSSiEjYQ==
126126
dependencies:
127127
"@zendeskgarden/container-utilities" "^1.0.0"
128128
polished "^4.0.0"
129129
prop-types "^15.5.7"
130130

131-
"@zendeskgarden/react-theming@^8.69.6":
132-
version "8.69.6"
133-
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.69.6.tgz#b1a2af2eb42645d1db4972f5b0cacd0a5a1ed0bb"
134-
integrity sha512-ltWaRPRts7ynUrYxJapEoBjK3zUAw57z/vH0GuxG7k+ngczj4Vt2HvWIrdMACWqd9KTdQ11lgeJjXGsTxrLD4Q==
131+
"@zendeskgarden/react-theming@^8.69.7":
132+
version "8.69.7"
133+
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.69.7.tgz#b84b2d3984ea77ec31d5d6a59ee0fa71bfe41f13"
134+
integrity sha512-oG5zmAnUWEArrr9ZYDsY0o/qmmYHSfYLv0x4O3P7wqIqWBMrLCM3nrcyxP//Fq9dXDsmPLxPXmFq+rJRfrCzpw==
135135
dependencies:
136136
"@zendeskgarden/container-focusvisible" "^1.0.0"
137137
"@zendeskgarden/container-utilities" "^1.0.0"
138138
lodash.memoize "^4.1.2"
139139
polished "^4.0.0"
140140
prop-types "^15.5.7"
141141

142-
"@zendeskgarden/react-tooltips@^8.69.6":
143-
version "8.69.6"
144-
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tooltips/-/react-tooltips-8.69.6.tgz#4f87a27ac8730135685c8664a45ecdabcb228b0c"
145-
integrity sha512-tksenWVPap1tslDzAtl6FE9vlvIq+9cWQVlF4mf16LuaHWDms+ox9MmmQ1qXidgMtgS31cO3kocm0Y4mUNJpVQ==
142+
"@zendeskgarden/react-tooltips@^8.69.7":
143+
version "8.69.7"
144+
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tooltips/-/react-tooltips-8.69.7.tgz#c76225c56db4602debe971a5281f16bfb2570ba6"
145+
integrity sha512-ffV6zYxIJQiT01YbyCWBE5tX8rubhL46C70V546zE9Yv+ulUKugx/GLW6BLRen1iRCK2GNIqHVJ8riGoz4HcSg==
146146
dependencies:
147147
"@zendeskgarden/container-tooltip" "^1.0.0"
148148
"@zendeskgarden/container-utilities" "^1.0.0"
@@ -189,10 +189,10 @@ define-properties@^1.1.3, define-properties@^1.2.0:
189189
has-property-descriptors "^1.0.0"
190190
object-keys "^1.1.1"
191191

192-
downshift@^7.6.0:
193-
version "7.6.0"
194-
resolved "https://registry.yarnpkg.com/downshift/-/downshift-7.6.0.tgz#de04fb2962bd6c4ea94589c797c91f34aa9816f3"
195-
integrity sha512-VSoTVynTAsabou/hbZ6HJHUVhtBiVOjQoBsCPcQq5eAROIGP+9XKMp9asAKQ3cEcUP4oe0fFdD2pziUjhFY33Q==
192+
downshift@^8.0.0:
193+
version "8.1.0"
194+
resolved "https://registry.yarnpkg.com/downshift/-/downshift-8.1.0.tgz#72023513256134723fe807a54168ebc64f9ddf6c"
195+
integrity sha512-e9EBBLZvB2G73qT272x3hExttGCH1q1usbjirm+1aMcFXuzSWhgBdbnAHPlFI2rEq61cU/kDrEIMrY+ozMhvmg==
196196
dependencies:
197197
"@babel/runtime" "^7.14.8"
198198
compute-scroll-into-view "^2.0.4"

0 commit comments

Comments
 (0)