question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dropdown with inline JS issue in 3.9.4

See original GitHub issue

Description

After upgrading to v3.9.4, I faced a major problem with my dropdown.

Steps to Reproduce

  1. Update to v3.9.4
  2. 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>
  1. Admire this beautiful error : TypeError: (intermediate value).filter is not a function located at renderItems xxxxx/node_modules/react-materialize/lib/Dropdown.js:54

image

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:closed
  • Created 3 years ago
  • Comments:13 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
alextrasterocommented, Dec 15, 2020

Should be fixed in 3.9.5

1reaction
MauAbatacommented, Dec 15, 2020

@alextrastero I just realized that the current code will most likely break on any single-element Dropdown, which includes simple things like

<Dropdown>
  <a>I'm an only child</a>
</Dropdown>

Since the components prop 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?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found