Description
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;
}