select onchange doesn't work in react

[nadavshabtai]

Expected Behavior

onChange event should trigger in react when changing the value of the select input

Solution

You should add this code:

      options.find('li').each(function (i) {
        var $curr_select = $select;
        $(this).click(function () {
          // Check if option element is disabled
          if (!$(this).hasClass('disabled')) {
            $curr_select.find('option').eq(i).prop('selected', true);

            // Trigger onchange() event
            $curr_select.trigger('change');
start ->
            //Trigger DOM onchange
            var event = document.createEvent("HTMLEvents");
            event.initEvent("change", true, true);
            $curr_select[0].dispatchEvent(event);
end->

            $curr_select.siblings('input.select-dropdown').val($(this).text());
            if (typeof callback !== 'undefined') callback();
          }
        });

      });

[DanielRuf]

That is a known problem with React based projects and not a problem with the library like Materialize as it has to work with the shadow DOM (it's not the real DOM).

[DanielRuf]

Also take a look at https://github.com/react-materialize/react-materialize and http://material-ui.com/

[thomascothran]

I've been forced away from Materialize on new projects for precisely this reason. It's not just React, it's also a problem for Angular and Vue. #2838 Judging by Dogfalo's comment on #1160, it does not look like there will be a fix. The options mentioned by @DanielRuf work, and the other CSS frameworks I've tested with React (Bootstrap, Bulma) do not have this problem.

[Dogfalo]

The fix is to use the browser-default class. This allows the native select to work similar to Bootstrap and Bulma

On Thu, Sep 28, 2017 at 6:18 PM, Thomas notifications@github.com wrote:

I've been forced away from Materialize on new projects for precisely this reason. It's not just React, it's also a problem for Angular and Vue.

2838 https://github.com/Dogfalo/materialize/issues/2838 Judging by

Dogfalo's comment on #1160 https://github.com/Dogfalo/materialize/issues/1160, it does not look like there will be a fix. The options mentioned by @DanielRuf https://github.com/danielruf work, and the other CSS frameworks I've tested with React (Bootstrap, Bulma) do not have this problem.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Dogfalo/materialize/issues/5223#issuecomment-333005247, or mute the thread https://github.com/notifications/unsubscribe-auth/ACpax888aj8TJRs1aTDoEM878lKLRCOSks5snEVxgaJpZM4Ph376 .

-- Doggy sends his greetings from Mars.

[dennisja]

I'm pretty sure this solves the caveat if you put it in your componentDidMount component. If the select is to be re rendered on state change, this should as well be put in componentDidUpdate

// find the select element by its ref
const el = ReactDOM.findDOMNode(this.refs.ref_to_my_select);
// initialize the select
$('select').material_select();
// register a method to fireup whenever the select changes
$(el).on('change', this.handleInputChange)