jakezatecky / react-checkbox-tree

A simple and elegant checkbox tree for React.

Home Page:https://jakezatecky.github.io/react-checkbox-tree/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

When using native checkboxes, the custom ones are shown too

puehringer opened this issue · comments

Describe the bug
When setting nativeCheckboxes={true}, the custom checkboxes should be hidden and the input should be shown. Currently, it does not hide the custom checkboxes because of invalid CSS.

Reproduction steps
Just set nativeCheckboxes={true} in version 1.7.1: https://codesandbox.io/s/react-checkbox-tree-example-forked-24iu3?file=/src/components/Widget.js

Expected behavior
The custom checkboxes should be hidden.

Solution
The problem was introduced with this PR: 6eec84f#diff-cec3d603b60b2c5f9b645161b2887ee58e4ae213ef0adb914ce48fc5965eb32cR149-R150

Previously, the appended & caused the style to be in correct order:

.rct-checkbox {
  .rct-native-display & {
    display: none;
  }
}

but it was refactored to

.rct-checkbox .rct-native-display {
  display: none;
}

which is exactly the opposite order. In order to solve this, simply swap the classes, as a rct-checkbox is a child of rct-native-display:

.rct-native-display .rct-checkbox {
  display: none;
}

Screenshots
image

Thanks for the report!