Skip to content

Commit b1d40e2

Browse files
jzempeljzempel
authored
fix(combobox): prevent tag state rerender on focus (#1587)
1 parent 7b320c3 commit b1d40e2

File tree

4 files changed

+47
-41
lines changed

4 files changed

+47
-41
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": 55445,
4-
"minified": 40307,
5-
"gzipped": 9209
3+
"bundled": 55344,
4+
"minified": 40274,
5+
"gzipped": 9098
66
},
77
"index.esm.js": {
8-
"bundled": 50790,
9-
"minified": 35896,
10-
"gzipped": 8636,
8+
"bundled": 50695,
9+
"minified": 35869,
10+
"gzipped": 8627,
1111
"treeshaked": {
1212
"rollup": {
13-
"code": 28228,
13+
"code": 28209,
1414
"import_statements": 1064
1515
},
1616
"webpack": {
17-
"code": 31112
17+
"code": 31080
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.3",
25+
"@zendeskgarden/container-combobox": "^1.0.5",
2626
"@zendeskgarden/container-utilities": "^1.0.0",
2727
"@zendeskgarden/react-forms": "^8.69.4",
2828
"@zendeskgarden/react-tags": "^8.69.4",

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -216,28 +216,26 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
216216
}, [getLabelProps, labelProps, setLabelProps]);
217217

218218
const Tags = ({ selectedOptions }: { selectedOptions: IOption[] }) => {
219-
const [isFocused, setIsFocused] = useState(hasFocus.current);
220219
const value = selectedOptions.length - maxTags;
221220

222221
return (
223222
<>
224223
{selectedOptions.map((option, index) => {
225224
const key = toString(option);
226225
const disabled = isDisabled || option.disabled;
227-
const hidden = !isFocused && index >= maxTags;
226+
const hidden = !hasFocus.current && index >= maxTags;
228227

229228
return (
230229
<Tag
231230
key={key}
232231
hidden={hidden}
233-
onFocus={() => setIsFocused(true)}
234232
option={{ ...option, disabled }}
235233
tooltipZIndex={listboxZIndex ? listboxZIndex + 1 : undefined}
236234
{...optionTagProps[key]}
237235
/>
238236
);
239237
})}
240-
{!isFocused && selectedOptions.length > maxTags && (
238+
{!hasFocus.current && selectedOptions.length > maxTags && (
241239
<StyledTagsButton
242240
disabled={isDisabled}
243241
isCompact={isCompact}

‎packages/dropdowns.next/yarn.lock

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,14 @@
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.3":
52-
version "1.0.3"
53-
resolved "https://registry.yarnpkg.com/@zendeskgarden/container-combobox/-/container-combobox-1.0.3.tgz#f481a97bce8ee4ff3577e880bf0139c538976f7d"
54-
integrity sha512-66PvvSw8Z6seyRdx+FEBz+f1Sq6NlIJs1cfzhZiBCEIATwM8qkIeSxd+gX6uJowsi29AtpkcAkMpC1nm6s8Reg==
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==
5555
dependencies:
5656
"@babel/runtime" "^7.8.4"
57-
"@zendeskgarden/container-field" "^3.0.5"
58-
"@zendeskgarden/container-utilities" "^1.0.6"
57+
"@zendeskgarden/container-field" "^3.0.7"
58+
"@zendeskgarden/container-utilities" "^1.0.8"
5959
downshift "^7.6.0"
6060

6161
"@zendeskgarden/container-field@^2.1.0":
@@ -66,13 +66,13 @@
6666
"@babel/runtime" "^7.8.4"
6767
react-uid "^2.2.0"
6868

69-
"@zendeskgarden/container-field@^3.0.5":
70-
version "3.0.5"
71-
resolved "https://registry.yarnpkg.com/@zendeskgarden/container-field/-/container-field-3.0.5.tgz#851fb48ba2ef2222eabb6833335af49771f20976"
72-
integrity sha512-0a0TIIeYSCkvRLSjiwatpQdk8A7S8h4KK0Ikvm4Rh85MepG9f+aJ0AcMJl6oVGo/d1jC/+u6B1yqv2bOQ3PGiw==
69+
"@zendeskgarden/container-field@^3.0.7":
70+
version "3.0.7"
71+
resolved "https://registry.yarnpkg.com/@zendeskgarden/container-field/-/container-field-3.0.7.tgz#dc4d2b02461caee1959f5784720f444af663c587"
72+
integrity sha512-JnI5fvqI1tnbzl/PFybeyq/rRsEu7fLGYqbrgnijp1gs/75kY0D6PssFFBC3qXhyvJoarv92loIc3Zt7wRPqyA==
7373
dependencies:
7474
"@babel/runtime" "^7.8.4"
75-
"@zendeskgarden/container-utilities" "^1.0.6"
75+
"@zendeskgarden/container-utilities" "^1.0.8"
7676

7777
"@zendeskgarden/container-focusvisible@^1.0.0":
7878
version "1.0.6"
@@ -98,18 +98,26 @@
9898
"@zendeskgarden/container-utilities" "^1.0.5"
9999
react-uid "^2.2.0"
100100

101-
"@zendeskgarden/container-utilities@^1.0.0", "@zendeskgarden/container-utilities@^1.0.5", "@zendeskgarden/container-utilities@^1.0.6":
101+
"@zendeskgarden/container-utilities@^1.0.0", "@zendeskgarden/container-utilities@^1.0.5":
102102
version "1.0.6"
103103
resolved "https://registry.yarnpkg.com/@zendeskgarden/container-utilities/-/container-utilities-1.0.6.tgz#78db1b19695307b58bf739f8c49255ef8c5667cd"
104104
integrity sha512-yM3kTgZ5kzWbFckIFPIiyzB72yEWHt1f3GVPoD8W8NNfR+WXmbqwfsSs6woxDnohsT4K+aZHMc5lOjGycsz3IQ==
105105
dependencies:
106106
"@babel/runtime" "^7.8.4"
107107
"@reach/auto-id" "^0.18.0"
108108

109-
"@zendeskgarden/react-forms@^8.69.3":
110-
version "8.69.3"
111-
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-forms/-/react-forms-8.69.3.tgz#65e5447e97dcecb2e743acf1697c403528065299"
112-
integrity sha512-fy9yVWz9LJK0TMQNx2PYR8BlQXc8vYnZvL4firxjc8LLjm4f+MBkTeaWOymbsZHYR2FK3UyzAUFMRS9IqO5ztw==
109+
"@zendeskgarden/container-utilities@^1.0.8":
110+
version "1.0.8"
111+
resolved "https://registry.yarnpkg.com/@zendeskgarden/container-utilities/-/container-utilities-1.0.8.tgz#c2e59d355080cfcb2b9a516c53ddda604e9b34fc"
112+
integrity sha512-7ERJtrnaVUD+qOnp8XTlofuV67+j5XleVRXJy1QmVi/Yy/usqjcCFpMosZnYVMgDHmJgvHomUyqTNvKdgqwfrg==
113+
dependencies:
114+
"@babel/runtime" "^7.8.4"
115+
"@reach/auto-id" "^0.18.0"
116+
117+
"@zendeskgarden/react-forms@^8.69.4":
118+
version "8.69.4"
119+
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-forms/-/react-forms-8.69.4.tgz#eb3df62ed82b8048f5d5ff67281f8246347d2416"
120+
integrity sha512-tTv2esfVwN+BoaS/B/RYMhv6L3qxJdVPruVqnJaUhAkIDsEmYGCr/kqdSObccj09+5S+V+2NCpzmeDnr4oiFoA==
113121
dependencies:
114122
"@zendeskgarden/container-field" "^2.1.0"
115123
"@zendeskgarden/container-slider" "^0.1.1"
@@ -119,30 +127,30 @@
119127
prop-types "^15.5.7"
120128
react-merge-refs "^1.1.0"
121129

122-
"@zendeskgarden/react-tags@^8.69.3":
123-
version "8.69.3"
124-
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tags/-/react-tags-8.69.3.tgz#a6aaccd6be9b33534b0133ebb8f50ae7d679f103"
125-
integrity sha512-Ao90Rm+slHPuKQX+r0CuurVkSYUmCpfkmqGue1UHGByHVbxln3fMjfMYSCoP8pNyxWnXNb1EcIMj8SI5m2LtiQ==
130+
"@zendeskgarden/react-tags@^8.69.4":
131+
version "8.69.4"
132+
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tags/-/react-tags-8.69.4.tgz#d89c9ba2ac6bab574869e76e889c1d67cf4aef46"
133+
integrity sha512-FM1fxeZxGEPnUh1idiPehdb8erbT1GlcQhO9mxo4Wqsc9YsFx+P8bWbzv+nk3vHgPWj5ccG6ZlDQA/Xf6nZGRg==
126134
dependencies:
127135
"@zendeskgarden/container-utilities" "^1.0.0"
128136
polished "^4.0.0"
129137
prop-types "^15.5.7"
130138

131-
"@zendeskgarden/react-theming@^8.69.3":
132-
version "8.69.3"
133-
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.69.3.tgz#88304447f0e02f492191c9c18d8e0b69446087b2"
134-
integrity sha512-AmW4V3h/3erhSpvvPCRH7Nxa+M5Dx3DPbgKwhzb/rCM85rez2TxH2l46q7FXQmlzo5grO/UvevG44yiQTz/2mw==
139+
"@zendeskgarden/react-theming@^8.69.4":
140+
version "8.69.4"
141+
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-theming/-/react-theming-8.69.4.tgz#d81589ba9a98b0b04eaaf85f678d4322dbeaccad"
142+
integrity sha512-vKHh6vHVnAv1Y/+Iy+2GYtGCLBUGXcojaCYRnAYeN/QgDnLB4nyksvvAw585Z/d6AfrlMh0pMQXXqrl0tLUgnA==
135143
dependencies:
136144
"@zendeskgarden/container-focusvisible" "^1.0.0"
137145
"@zendeskgarden/container-utilities" "^1.0.0"
138146
lodash.memoize "^4.1.2"
139147
polished "^4.0.0"
140148
prop-types "^15.5.7"
141149

142-
"@zendeskgarden/react-tooltips@^8.69.3":
143-
version "8.69.3"
144-
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tooltips/-/react-tooltips-8.69.3.tgz#5a600385956051ae47333b476d86f849d9218266"
145-
integrity sha512-sQCpTxMYYjJg3TKZqG8R+wUxx3BEKc4wyZyFqgm1ds63IRGPVxvx7zdOYMXP2mmQJMpVwdF9a00sphwQysSDSA==
150+
"@zendeskgarden/react-tooltips@^8.69.4":
151+
version "8.69.4"
152+
resolved "https://registry.yarnpkg.com/@zendeskgarden/react-tooltips/-/react-tooltips-8.69.4.tgz#34130e5b6996e2315d6a2cee1f76d39ad4be254c"
153+
integrity sha512-jzFgJM3fp1hH1RvPZs3rPz4wnKz1mRGbZiC+3ehcRyf2fEIkO54H/LZZ3txFXuhTndyrbtty/SLk4IQ1t+S7yw==
146154
dependencies:
147155
"@zendeskgarden/container-tooltip" "^1.0.0"
148156
"@zendeskgarden/container-utilities" "^1.0.0"

0 commit comments

Comments
 (0)