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.

React4s/Materialize Modal Popup not Updating as Expected

See original GitHub issue

I have a React4s/materialize modal popup where you choose an item from a <select> menu in the dialog and that should update the layout below depending on the selection. However, even though the state variable is updated and render is called as expected, the changes are not propagated to the display. Is there anything special in React or React4s (or materialize) about modal popups that would prevent them from being updated once displayed?

The basic render method looks like this:

  override def render(get: Get): Node = {
    val trigger = E.a(A.className("modal-trigger"), A.href(s"#$id"), Text("Load"))
    val body = E.div(,
      A.className("modal modal-fixed-footer"),
      E.div(A.className("model-content"), makeDialogBody(get)),
      E.div(A.className("modal-footer"), makeButtons(get))
    ), body)

And I have verified that the items are being added correctly in the methods called. Its just that they don’t show up if changed as a result of an event. The items only show up if created that way the first time. It seems like the layout won’t change, once displayed.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

abrightoncommented, Feb 25, 2019

It looks like you need to call some Materialize JavaScript code after dynamically updating a select element. Something like:


So this is not a React4s issue. Thanks for pointing me in the right direction.

abrightoncommented, Feb 25, 2019

Yes, that is the expected behavior, however I am not seeing it. I just did a test and could see that if I comment out all the Materialize css related parts from the HTML file, it also works as expected, so I guess this has something to do with materialize. I’m using this to generate the HTML via the sbt-web plugin:

@(title: String)(content: Html)

<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="">
        <link rel="stylesheet" href="/assets/css/layout.css">
        <link href="" rel="stylesheet">
        <link rel="shortcut icon" href="/assets/images/favicon.ico">
        <div id="main"></div>
        <script src=""></script>
        <script src="/assets/js/materializeInit.js"></script>
        @scalajs.html.scripts("csw-event-monitor-client", name => s"/assets/$name", name => getClass.getResource(s"/public/$name") != null)
        <script src="/assets/js/chartSettings.js"></script>
Read more comments on GitHub >

github_iconTop Results From Across the Web

React-Materialize Modal : any key will close ... - Stack Overflow
Expected behavior: I want to close the modal only when the button close is clicked or the button submit is clicked Do you...
Read more >
React-materialize-css Modals not working because it cannot ...
Coding example for the question React-materialize-css Modals not working because it cannot read Modal class of M-Reactjs.
Read more >
Problem with multiple select when onChange event we ...
As you said this is an issue with materializecss . When calling set state, the component is rerendered and the select is created...
Read more >
Modal is preventing page from scrolling - MDBootstrap
Expected behavior React page is large and should scroll to see all the page. When the modal is not showing. Actual behavior Once...
Read more >
How to solve "window is not defined" errors in React and Next.js
A different solution is to load your Scroll component using dynamic imports and the srr: false option. This way your component won't even...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found