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.id(id),
      A.className("modal modal-fixed-footer"),
      E.div(A.className("model-content"), makeDialogBody(get)),
      E.div(A.className("modal-footer"), makeButtons(get))
    )
    E.li(trigger, 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:
Created 5 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

abrightoncommented, Feb 25, 2019

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

M.FormSelect.init(document.getElementById(selectId))

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

0reactions

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">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
        <link rel="stylesheet" href="/assets/css/layout.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="shortcut icon" href="/assets/images/favicon.ico">
        <title>@title</title>
    </head>
    <body>
        <div id="main"></div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
        <script src="/assets/js/materializeInit.js"></script>
        @content
        @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>
    </body>
</html>