Skip to content

Commit ed6661f

Browse files
tplevkolordrip
tplevko
authored and
lordrip
committed
fix: typeahead not showing all the elements
1 parent 4f90b16 commit ed6661f

3 files changed

Lines changed: 93 additions & 66 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@
5858
"@babel/preset-react": "^7.18.6",
5959
"@babel/preset-typescript": "^7.21.5",
6060
"@carbon/icons-react": "^11.52.0",
61-
"@carbon/react": "^1.73.0",
62-
"@carbon/styles": "^1.72.0",
61+
"@carbon/react": "^1.99.0",
62+
"@carbon/styles": "^1.98.0",
6363
"@eslint/js": "^9.10.0",
6464
"@kaoto/camel-catalog": "^0.3.0",
6565
"@lerna-lite/cli": "^3.0.0",

‎src/form/Typeahead/Typeahead.tsx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,17 @@ export const Typeahead: FunctionComponent<TypeaheadProps> = ({
5555
const keyboardEvent = e as KeyboardEvent;
5656
const currentValue = inputValueRef.current;
5757
if (keyboardEvent.key === 'Enter' && currentValue.trim()) {
58+
// Check if the dropdown menu is open (has highlighted item)
59+
const menu = wrapperRef.current?.querySelector('[role="listbox"]');
60+
const highlightedItem = menu?.querySelector(
61+
'[data-highlighted="true"], .cds--list-box__menu-item--highlighted',
62+
);
63+
64+
// If there's a highlighted item in the dropdown, let ComboBox handle it
65+
if (highlightedItem) {
66+
return;
67+
}
68+
5869
const isExistingItem = items.some((item) => item.name === currentValue);
5970
const isCreateNew = currentValue.includes('Create new');
6071
if (!isExistingItem && !isCreateNew) {
@@ -94,6 +105,7 @@ export const Typeahead: FunctionComponent<TypeaheadProps> = ({
94105
const selected = data.selectedItem ?? null;
95106

96107
if (customInputHandledRef.current) {
108+
customInputHandledRef.current = false;
97109
return;
98110
}
99111

@@ -169,7 +181,9 @@ export const Typeahead: FunctionComponent<TypeaheadProps> = ({
169181
}, [items, onCreate, onCreatePrefix, inputValue]);
170182

171183
const selectedComboBoxItem = useMemo(() => {
172-
return selectedItem ? { id: String(selectedItem.value), text: selectedItem.name } : null;
184+
return selectedItem
185+
? { id: String(selectedItem.value), text: selectedItem.name, description: selectedItem.description }
186+
: null;
173187
}, [selectedItem]);
174188

175189
return (
@@ -191,7 +205,15 @@ export const Typeahead: FunctionComponent<TypeaheadProps> = ({
191205
if (menu?.item?.id === CREATE_NEW_ITEM) {
192206
return true;
193207
}
208+
// If no input value, show all items
194209
if (!inputValue) return true;
210+
211+
// If input value matches the selected item exactly, show all items
212+
if (selectedItem && inputValue === selectedItem.name) {
213+
return true;
214+
}
215+
216+
// Otherwise, filter based on input
195217
return menu?.item?.text?.toLowerCase().includes(inputValue.toLowerCase()) ?? false;
196218
}}
197219
/>

‎yarn.lock‎

Lines changed: 68 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1739,12 +1739,12 @@ __metadata:
17391739
languageName: node
17401740
linkType: hard
17411741

1742-
"@carbon/colors@npm:^11.43.0":
1743-
version: 11.43.0
1744-
resolution: "@carbon/colors@npm:11.43.0"
1742+
"@carbon/colors@npm:^11.45.0":
1743+
version: 11.45.0
1744+
resolution: "@carbon/colors@npm:11.45.0"
17451745
dependencies:
17461746
"@ibm/telemetry-js": "npm:^1.5.0"
1747-
checksum: 10/2d87fb0cc5b6cb21a2b053058b1c022c121943a3cab51191b81c324bb8bf17b8ef6d3459be5f391ff7e4e82f290ea7f81231c7d98319a8d20240dee592f1d197
1747+
checksum: 10/c09d138ea30617c6bbe27fba0e642d6926e12470e655ee6a867dae9d20217d9ef4e1472e226b0f8d3916b91d38bde3395c3d1642c3fc27f70895e12a61e9007e
17481748
languageName: node
17491749
linkType: hard
17501750

@@ -1757,13 +1757,13 @@ __metadata:
17571757
languageName: node
17581758
linkType: hard
17591759

1760-
"@carbon/grid@npm:^11.46.0":
1761-
version: 11.46.0
1762-
resolution: "@carbon/grid@npm:11.46.0"
1760+
"@carbon/grid@npm:^11.48.0":
1761+
version: 11.48.0
1762+
resolution: "@carbon/grid@npm:11.48.0"
17631763
dependencies:
1764-
"@carbon/layout": "npm:^11.44.0"
1764+
"@carbon/layout": "npm:^11.46.0"
17651765
"@ibm/telemetry-js": "npm:^1.5.0"
1766-
checksum: 10/9ef731fa5654d851531fd2c510facb68b57ecdc14cc58a58b8baf6c9a9842892b11437bce2f9a69d332dbe0474a13f31a205424117377d8e3c33111f68c30ac4
1766+
checksum: 10/09be7927195261b1c6fc7ccba3c67d1cee8ede8000fc2b47a32deda50fa17d9fa36fd5c54fba6815d03b1f1c72f9ba71ab158ed273bbc1df5aa27d890ad26dff
17671767
languageName: node
17681768
linkType: hard
17691769

@@ -1776,7 +1776,7 @@ __metadata:
17761776
languageName: node
17771777
linkType: hard
17781778

1779-
"@carbon/icons-react@npm:^11.52.0, @carbon/icons-react@npm:^11.71.0":
1779+
"@carbon/icons-react@npm:^11.52.0":
17801780
version: 11.72.0
17811781
resolution: "@carbon/icons-react@npm:11.72.0"
17821782
dependencies:
@@ -1789,34 +1789,47 @@ __metadata:
17891789
languageName: node
17901790
linkType: hard
17911791

1792-
"@carbon/layout@npm:^11.44.0":
1793-
version: 11.44.0
1794-
resolution: "@carbon/layout@npm:11.44.0"
1792+
"@carbon/icons-react@npm:^11.73.0":
1793+
version: 11.73.0
1794+
resolution: "@carbon/icons-react@npm:11.73.0"
17951795
dependencies:
1796+
"@carbon/icon-helpers": "npm:^10.70.0"
17961797
"@ibm/telemetry-js": "npm:^1.5.0"
1797-
checksum: 10/d072eeb8a7c9046e7d0e8120744778a024bcd7fdb5aaf47d43b0eb697816c074dc1e8bfc5378de9116c47b54a21aafc6e50fbd5bd7b7ce4c4e001d2d6d862895
1798+
prop-types: "npm:^15.8.1"
1799+
peerDependencies:
1800+
react: ">=16"
1801+
checksum: 10/99a7ff743d550fd2095bc63df49ae95dc67b012c19d999193656aee2b9138f8205b9f483b1a6c6fa561a8b8e61e41abad918985c75cdadb3ef63d16c8beab301
17981802
languageName: node
17991803
linkType: hard
18001804

1801-
"@carbon/motion@npm:^11.38.0":
1802-
version: 11.38.0
1803-
resolution: "@carbon/motion@npm:11.38.0"
1805+
"@carbon/layout@npm:^11.46.0":
1806+
version: 11.46.0
1807+
resolution: "@carbon/layout@npm:11.46.0"
18041808
dependencies:
18051809
"@ibm/telemetry-js": "npm:^1.5.0"
1806-
checksum: 10/9cf21cf6e8248b09dafd5d9a7f03da3123b5954eaa4c1dfd9a374ac9c6f5e3aa01bf4cd081b82f4273370ed6a8f47b32934771f4f21b670deed8732678c5e861
1810+
checksum: 10/7a21a3a1fe61d628c00898694796c49446c7915e8a4e019e9e71369f92cfec9bffbe5a727ef3f183a8fc564ee636bcfc2322d7fc29db670f136664fd8e7c3526
18071811
languageName: node
18081812
linkType: hard
18091813

1810-
"@carbon/react@npm:^1.73.0":
1811-
version: 1.97.0
1812-
resolution: "@carbon/react@npm:1.97.0"
1814+
"@carbon/motion@npm:^11.39.0":
1815+
version: 11.39.0
1816+
resolution: "@carbon/motion@npm:11.39.0"
1817+
dependencies:
1818+
"@ibm/telemetry-js": "npm:^1.5.0"
1819+
checksum: 10/7acef61fff0fc567b89798ae89f32beed2a1094f62bed80a1fdfabbd548ef8183a7f827dbae984512c105c0d37efbe33e4f3fe372a05ae6141282c885c7863f2
1820+
languageName: node
1821+
linkType: hard
1822+
1823+
"@carbon/react@npm:^1.99.0":
1824+
version: 1.99.0
1825+
resolution: "@carbon/react@npm:1.99.0"
18131826
dependencies:
18141827
"@babel/runtime": "npm:^7.27.3"
18151828
"@carbon/feature-flags": "npm:>=0.32.0"
1816-
"@carbon/icons-react": "npm:^11.71.0"
1817-
"@carbon/layout": "npm:^11.44.0"
1818-
"@carbon/styles": "npm:^1.96.0"
1819-
"@carbon/utilities": "npm:^0.13.0"
1829+
"@carbon/icons-react": "npm:^11.73.0"
1830+
"@carbon/layout": "npm:^11.46.0"
1831+
"@carbon/styles": "npm:^1.98.0"
1832+
"@carbon/utilities": "npm:^0.14.0"
18201833
"@floating-ui/react": "npm:^0.27.4"
18211834
"@ibm/telemetry-js": "npm:^1.5.0"
18221835
classnames: "npm:2.5.1"
@@ -1828,27 +1841,26 @@ __metadata:
18281841
prop-types: "npm:^15.8.1"
18291842
react-fast-compare: "npm:^3.2.2"
18301843
tabbable: "npm:^6.2.0"
1831-
window-or-global: "npm:^1.0.1"
18321844
peerDependencies:
18331845
react: ^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0
18341846
react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0
18351847
react-is: ^16.13.1 || ^17.0.2 || ^18.3.1 || ^19.0.0
18361848
sass: ^1.33.0
1837-
checksum: 10/e9dfb77ad0cdcc3fb15ddfaf8bea893a6a79a52a3f1aafe41f933aaf354b27844e77a64073b804856a2b56424b10f1ae8000a90df1370197cb3fa86343614fbc
1849+
checksum: 10/016e4547ee27962680ba6fbb50f802e5e5e928daa2a9adc4d06dd6b79b081c9ac7283685c151707f3e27fa9e2cfe25427790aacaeecae240cba75013e5715dfd
18381850
languageName: node
18391851
linkType: hard
18401852

1841-
"@carbon/styles@npm:^1.72.0, @carbon/styles@npm:^1.96.0":
1842-
version: 1.96.0
1843-
resolution: "@carbon/styles@npm:1.96.0"
1853+
"@carbon/styles@npm:^1.98.0":
1854+
version: 1.98.0
1855+
resolution: "@carbon/styles@npm:1.98.0"
18441856
dependencies:
1845-
"@carbon/colors": "npm:^11.43.0"
1857+
"@carbon/colors": "npm:^11.45.0"
18461858
"@carbon/feature-flags": "npm:>=0.32.0"
1847-
"@carbon/grid": "npm:^11.46.0"
1848-
"@carbon/layout": "npm:^11.44.0"
1849-
"@carbon/motion": "npm:^11.38.0"
1850-
"@carbon/themes": "npm:^11.64.0"
1851-
"@carbon/type": "npm:^11.50.0"
1859+
"@carbon/grid": "npm:^11.48.0"
1860+
"@carbon/layout": "npm:^11.46.0"
1861+
"@carbon/motion": "npm:^11.39.0"
1862+
"@carbon/themes": "npm:^11.66.0"
1863+
"@carbon/type": "npm:^11.52.0"
18521864
"@ibm/plex": "npm:6.0.0-next.6"
18531865
"@ibm/plex-mono": "npm:1.1.0"
18541866
"@ibm/plex-sans": "npm:1.1.0"
@@ -1864,41 +1876,41 @@ __metadata:
18641876
peerDependenciesMeta:
18651877
sass:
18661878
optional: true
1867-
checksum: 10/e0c8ef85e153d2938d8235e5dfb2edbfe2aa8d9721560cab7e093b1ee6aa9002e8bcc46ba96410c2e5c86be11e5638810ef5ab4ca14cc2c00bf56e4469401919
1879+
checksum: 10/f6114920ff7c2f2f4a32a8befe9246117c12a9ca69e75860a97af44239ccc5fc5f4e65002a74364b760fcb9737002213692611cb13247fb3ae4baff1994145a2
18681880
languageName: node
18691881
linkType: hard
18701882

1871-
"@carbon/themes@npm:^11.64.0":
1872-
version: 11.64.0
1873-
resolution: "@carbon/themes@npm:11.64.0"
1883+
"@carbon/themes@npm:^11.66.0":
1884+
version: 11.66.0
1885+
resolution: "@carbon/themes@npm:11.66.0"
18741886
dependencies:
1875-
"@carbon/colors": "npm:^11.43.0"
1876-
"@carbon/layout": "npm:^11.44.0"
1877-
"@carbon/type": "npm:^11.50.0"
1887+
"@carbon/colors": "npm:^11.45.0"
1888+
"@carbon/layout": "npm:^11.46.0"
1889+
"@carbon/type": "npm:^11.52.0"
18781890
"@ibm/telemetry-js": "npm:^1.5.0"
18791891
color: "npm:^4.0.0"
1880-
checksum: 10/18ee3012b2a1b1d5c80b93a628811d00d3dd1850d286051875db69ab9c557d19c7d195c3c25a7f1648bd1e9e00c44a3f592b2a79d56fe7bb6760d2735e733cd5
1892+
checksum: 10/cf941fa9f486a4a2659067486bfe389497e01243bed9ce254ebcea583bf2db3314b0945ccf089902f760e5f8970bf2f9d194ad6f627c8e5363b746fb973354c8
18811893
languageName: node
18821894
linkType: hard
18831895

1884-
"@carbon/type@npm:^11.50.0":
1885-
version: 11.50.0
1886-
resolution: "@carbon/type@npm:11.50.0"
1896+
"@carbon/type@npm:^11.52.0":
1897+
version: 11.52.0
1898+
resolution: "@carbon/type@npm:11.52.0"
18871899
dependencies:
1888-
"@carbon/grid": "npm:^11.46.0"
1889-
"@carbon/layout": "npm:^11.44.0"
1900+
"@carbon/grid": "npm:^11.48.0"
1901+
"@carbon/layout": "npm:^11.46.0"
18901902
"@ibm/telemetry-js": "npm:^1.5.0"
1891-
checksum: 10/ce13856cbd0df2a95c9d93ecbe7704680df3e44862f63c9523347e3b9905ec1dfc2498c45912db395845285ba205e70866e6c4fb39053b1205a12de064b28238
1903+
checksum: 10/57f5043dcf0377a763cf152f64b9b7bc96f990f6cae7974e90033f0f31fee64c02e1aca973121fe28c45fdc3b3a0a176f47a61bd030a94c9d0cefeea16f83725
18921904
languageName: node
18931905
linkType: hard
18941906

1895-
"@carbon/utilities@npm:^0.13.0":
1896-
version: 0.13.0
1897-
resolution: "@carbon/utilities@npm:0.13.0"
1907+
"@carbon/utilities@npm:^0.14.0":
1908+
version: 0.14.0
1909+
resolution: "@carbon/utilities@npm:0.14.0"
18981910
dependencies:
18991911
"@ibm/telemetry-js": "npm:^1.6.1"
19001912
"@internationalized/number": "npm:^3.6.1"
1901-
checksum: 10/6913ac883ba0e0a610e2c5016af7bfbbdb9dddbf06c1533d2f611bffcdf7ee19f9298c01511fe6c922618785f07f0a5bdb4a47200f2ece02d4cdf8629998fbf6
1913+
checksum: 10/899446a112fe15ca6315a14b37f9c62ddd511edcba50300ed30d6d32b5598a5d1090c5db72941000ca8f8a31d07b1568dbcbf7e895b7a81f2468b2dff308f7a1
19021914
languageName: node
19031915
linkType: hard
19041916

@@ -2992,8 +3004,8 @@ __metadata:
29923004
"@babel/preset-react": "npm:^7.18.6"
29933005
"@babel/preset-typescript": "npm:^7.21.5"
29943006
"@carbon/icons-react": "npm:^11.52.0"
2995-
"@carbon/react": "npm:^1.73.0"
2996-
"@carbon/styles": "npm:^1.72.0"
3007+
"@carbon/react": "npm:^1.99.0"
3008+
"@carbon/styles": "npm:^1.98.0"
29973009
"@eslint/js": "npm:^9.10.0"
29983010
"@kaoto/camel-catalog": "npm:^0.3.0"
29993011
"@lerna-lite/cli": "npm:^3.0.0"
@@ -15211,13 +15223,6 @@ __metadata:
1521115223
languageName: node
1521215224
linkType: hard
1521315225

15214-
"window-or-global@npm:^1.0.1":
15215-
version: 1.0.1
15216-
resolution: "window-or-global@npm:1.0.1"
15217-
checksum: 10/19272a9589dedf790389376015b7a92e9b987d1c9b15457840f65a3829c5173a8cecce72111944624d98c2120799168d26b38e6b911fff77b4828a2322a8a02e
15218-
languageName: node
15219-
linkType: hard
15220-
1522115226
"word-wrap@npm:^1.2.5":
1522215227
version: 1.2.5
1522315228
resolution: "word-wrap@npm:1.2.5"

0 commit comments

Comments
 (0)