checkbox field do not trigger change event. Custom onChange passed to props also doesn't work

[pjarmalavicius]

Version: 7.0.3

Check / uncheck doesn't trigger "redux-form/CHANGE" action

[jokezer]

I have the same issue with radio input in 7.0.3.
When I click on radio input, I get

@@redux-form/FOCUS
@@redux-form/BLUR
@@redux-form/FOCUS

And no change event.
Checkboxes work fine.

[jokezer]

I created a custom component for radio button, and it works fine without onBlur prop.

[svengau]

Same as @jokezer

Here is the working code:

function MyCustomRadioInput(props) {
  const { input: { onBlur, ...rest } } = props;
  return <input type="radio" {...rest} />;
}

<Field
   name="..."
   component={MyCustomRadioInput}
   value="..."
/>

[likerRr]

I found extremely strange issue with checkboxe's onChange event. I bunlde my code via webpack for development and then serve it via browser-sync:

    browserSync.init({
        serveStatic: ['build'],
        server: {
          baseDir: `build/${projectType}`,
          middleware: [
            historyFallback(),
          ],
        },
      });

So when I serve it via browser-sync, event doesn't trigger, but if I serve it via simple node server - event triggers :) So I assume that browser sync adds some code which breaks my code. Has anyone faced such strange behavior?

[seberik]

@likerRr I observed the same for out code base. I could not find why onChange was not triggered for radio/checkbox inputs but the issue is not occurring in the compiled version.

[svengau]

Indeed, BrowserSync client seems to have a patch for IE to force change, which is not compatible with redux-form:

/**
 * Force Change event on radio & checkboxes (IE)
 */
utils.forceChange = function (elem) {
    elem.blur();
    elem.focus();
};

A quick and dirty fix: use browserSync.init({minify: false, ...), and patch the source with:

sed -i -- 's/bs.utils.forceChange(elem);/\/\/CODE REMOVED;/g' node_modules/browser-sync-client/dist/index.js

[seberik]

I disabled ghost-mode (https://browsersync.io/docs/options#option-ghostMode) and it seems to work.

[erikras]

There's a chance this might be fixed in v7.1.0, as it included a lot of fixes around checkboxes and deepEqual(). Can you confirm?

[seberik]

I could still reproduce the problem with redux-form v7.1.0 but I think that the problem, at least for me is browser-sync.

[likerRr]

@seberik @erikras Can we somehow solve it with browser-sync's team?

[Anandks1993]

@erikras I too faced the same issue, for checkbox, validation was triggered only after onblur. But this happened when I used state to handle the checked status of checkbox. When I changed the component to stateless it worked fine.

[crystalena]

ghostMode: false did the trick, thanks @seberik

[dmitru]

For me the problem was caused by BrowserSync too.
So frustrating! But glad I found the solution - thanks. 👍

[wahlg]

I'm experiencing this issue with redux form 7.4.2, and it is not due to using browser-sync. The first time that a checkbox is unchecked, it does not dispatch the @@redux-form/CHANGE event, but on subsequent toggles it does.

[ArtemUstilov]

@wahlg did you fin solution?

[iamandrewluca]

Can someone provide a https://codesandbox.io with the issue? I tried but can't reproduce.