Dropdown with inline JS issue in 3.9.4
See original GitHub issueDescription
After upgrading to v3.9.4, I faced a major problem with my dropdown.
Steps to Reproduce
- Update to v3.9.4
- Create a Dropdown looking like this one :
(You can obviously use any bool condition instead of
hasRole)
<Dropdown
id="security-dropdown"
trigger={
<a href="#!">
Sécurité <Icon right>arrow_drop_down</Icon>
</a>
}>
{hasRole('ROLE_GUARDIAN') ? (
<>
<Link to={`/${userType}/email`}>Adresse Mail</Link>
<Link to={`/${userType}/other`}>Autre</Link>
</>
) : (
<Link to={`/${userType}/password`}>Mot de Passe</Link>
)}
</Dropdown>
- Admire this beautiful error :
TypeError: (intermediate value).filter is not a functionlocated atrenderItems xxxxx/node_modules/react-materialize/lib/Dropdown.js:54

Expected behavior: Display correctly the dropdown as it was working in v3.9.3
Actual behavior: The temporary fix that I found is to make to separate conditions.
<Dropdown
id="security-dropdown"
trigger={
<a href="#!">
Sécurité <Icon right>arrow_drop_down</Icon>
</a>
}>
{hasRole('ROLE_GUARDIAN') && (
<Link to={`/${userType}/email`}>Adresse Mail</Link>
)}
{hasRole('ROLE_GUARDIAN') && (
<Link to={`/${userType}/other`}>Autre</Link>
)}
{!hasRole('ROLE_GUARDIAN') && (
<Link to={`/${userType}/password`}>Mot de Passe</Link>
)}
</Dropdown>
Explanations : The PR #1164 made by @MauAbata changed the way Dropdowns are rendered, that had impact on my code, and I suppose and many others.
Versions
react-materialize: 3.9.4 materialize-css: 1.0.0 react: 17.0.1
Issue Analytics
- State:
- Created 3 years ago
- Comments:13 (8 by maintainers)
Top Results From Across the Web
Delay js change in 3.9 breaks elementor mobile menus #3931
The new delay js breaks elementor mobile menu toggles for the dropdown entirely. I've excluded every single js file in elementor and they ......
Read more >javascript - DropDown list issue - Stack Overflow
1 Answer 1 · Use slideDown instead of slideToggle to set it always open. · select all dropdown-menu and remove current dropdown-menu with...
Read more >Dropdowns - Bootstrap
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript ...
Read more >Tutorial - django-autocomplete-light 3.9.0rc1 documentation
javascript widget initialization code, to trigger the autocomplete, ... to use a widget to select a Model with Select2, in our case by...
Read more >Changelog - WP Rocket
Bugfix: Fixes an issue with WordPress feeds being cached by default. ... Enhancement: Add additional inline JS exclusion from combine JS (#4290) ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

Should be fixed in
3.9.5@alextrastero I just realized that the current code will most likely break on any single-element Dropdown, which includes simple things like
Since the
componentsprop in that case is just the one child, not an array. I’ve created a PR to fix this and recurse into Fragments: https://github.com/react-materialize/react-materialize/pull/1168@Tchekda Out of curiosity, and if it is easily possible for you to build from the branch, can you try my current PR with your original code using the fragments?