fix(checkbox): add support for nested interactive elements

documentation-site/components/yard/config/checkbox.ts

@@ -1,3 +1,9 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
 import pick from 'just-pick';
 import {Checkbox, STYLE_TYPE, LABEL_PLACEMENT} from 'baseui/checkbox';
 import {PropTypes} from 'react-view';
@@ -119,6 +125,13 @@ const CheckboxConfig: TConfig = {
       description: 'If true the component will be focused on the first mount.',
       hidden: true,
     },
+    containsInteractiveElement: {
+      value: false,
+      type: PropTypes.Boolean,
+      description:
+        'Indicates the checkbox label contains an interactive element, and the default label behavior should be prevented for child elements.',
+      hidden: true,
+    },
     name: {
       value: undefined,
       type: PropTypes.String,

documentation-site/components/yard/config/radio.ts

@@ -123,7 +123,7 @@ const RadioGroupConfig: TConfig = {
       value: false,
       type: PropTypes.Boolean,
       description:
-        'Indicates the radio button contains an interactive element, and the default label behavior should be prevented for child elements.',
+        'Indicates the radio contains an interactive element, and the default label behavior should be prevented for child elements.',
       hidden: true,
     },
     'aria-label': {

src/checkbox/__tests__/checkbox-select.scenario.js

@@ -0,0 +1,24 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import * as React from 'react';
+
+import {StatefulCheckbox} from '../index.js';
+
+import {FormControl} from '../../form-control/index.js';
+import {Select} from '../../select/index.js';
+
+export default function Scenario() {
+  return (
+    <FormControl label="Test-label">
+      <StatefulCheckbox containsInteractiveElement>
+        <Select placeholder="Select color" />
+      </StatefulCheckbox>
+    </FormControl>
+  );
+}

src/checkbox/__tests__/checkbox.stories.js

@@ -13,6 +13,7 @@ import CheckboxStates from './checkbox-states.scenario.js';
 import CheckboxToggleRound from './checkbox-toggle-round.scenario.js';
 import CheckboxToggle from './checkbox-toggle.scenario.js';
 import CheckboxUnlabeled from './checkbox-unlabeled.scenario.js';
+import CheckboxSelect from './checkbox-select.scenario.js';
 import CheckboxDefault from './checkbox.scenario.js';
 
 export const Indeterminate = () => <CheckboxIndeterminate />;
@@ -21,4 +22,5 @@ export const States = () => <CheckboxStates />;
 export const ToggleRound = () => <CheckboxToggleRound />;
 export const Toggle = () => <CheckboxToggle />;
 export const Unlabeled = () => <CheckboxUnlabeled />;
+export const Select = () => <CheckboxSelect />;
 export const Checkbox = () => <CheckboxDefault />;

src/checkbox/checkbox.js

@@ -26,6 +26,7 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
   static defaultProps: DefaultPropsT = {
     overrides: {},
     checked: false,
+    containsInteractiveElement: false,
     disabled: false,
     autoFocus: false,
     isIndeterminate: false,
@@ -186,7 +187,13 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
         {...sharedProps}
         {...getOverrideProps(LabelOverride)}
       >
-        {children}
+        {this.props.containsInteractiveElement ? (
+          // Prevents the event from bubbling up to the label and moving focus to the radio button
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+          <div onClick={e => e.preventDefault()}>{children}</div>
+        ) : (
+          children
+        )}
       </Label>
     );
     return (

src/checkbox/index.d.ts

@@ -58,6 +58,7 @@ export interface StatefulCheckboxProps {
   disabled?: boolean;
   isError?: boolean;
   error?: boolean;
+  containsInteractiveElement?: boolean;
   labelPlacement?: 'top' | 'right' | 'bottom' | 'left';
   inputRef?: React.Ref<HTMLInputElement>;
   isIndeterminate?: boolean;
@@ -88,6 +89,7 @@ export interface CheckboxProps {
   'aria-describedby'?: string;
   'aria-errormessage'?: string;
   children?: React.ReactNode;
+  containsInteractiveElement?: boolean;
   overrides?: CheckboxOverrides;
   checked?: boolean;
   disabled?: boolean;

src/checkbox/types.js

@@ -50,6 +50,8 @@ export type PropsT = {
   ariaLabel?: string,
   /** Component or String value for label of checkbox. */
   children?: React$Node,
+  /** Indicates if this checkbox children contain an interactive element (prevents the label from moving focus from the child element to the radio button) */
+  containsInteractiveElement?: boolean,
   overrides?: OverridesT,
   /** Check or uncheck the control. */
   checked?: boolean,
@@ -151,6 +153,8 @@ export type StatefulCheckboxPropsT = {
   overrides?: OverridesT,
   /** Component or String value for label of checkbox. */
   children?: React$Node,
+  /** Indicates if this checkbox children contain an interactive element (prevents the label from moving focus from the child element to the radio button) */
+  containsInteractiveElement?: boolean,
   /** Defines the components initial state value */
   initialState?: StateT,
   /** Focus the checkbox on initial render. */