chore: fix Checkbox indeterminate state

.changeset/proud-bears-study.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix: Checkbox indeterminate state now persists on click if the state didn't change

packages/react/src/Checkbox/Checkbox.features.stories.tsx

@@ -1,3 +1,4 @@
+import {useState} from 'react'
 import Checkbox from '../Checkbox'
 import FormControl from '../FormControl'
 import {MarkGithubIcon} from '@primer/octicons-react'
@@ -43,11 +44,21 @@ export const WithCaption = () => {
  )
 }
 
-export const Indeterminate = () => (
- <form>
- <FormControl>
- <Checkbox value="default" indeterminate />
- <FormControl.Label>Default label</FormControl.Label>
- </FormControl>
- </form>
-)
+export const Indeterminate = () => {
+ const [isIndeterminate, setIsIndeterminate] = useState(true)
+ return (
+ <form>
+ <FormControl>
+ <Checkbox
+ value="default"
+ indeterminate={isIndeterminate}
+ onChange={() => {
+ setIsIndeterminate(!isIndeterminate)
+ }}
+ checked={false}
+ />
+ <FormControl.Label>Default label</FormControl.Label>
+ </FormControl>
+ </form>
+ )
+}

packages/react/src/Checkbox/Checkbox.tsx

@@ -50,6 +50,11 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
  const handleOnChange: ChangeEventHandler<HTMLInputElement> = e => {
  checkboxGroupContext.onChange && checkboxGroupContext.onChange(e)
  onChange && onChange(e)
+
+ if (indeterminate && checkboxRef.current) {
+ checkboxRef.current.indeterminate = true
+ checkboxRef.current.setAttribute('aria-checked', 'mixed')
+ }
  }
  const inputProps = {
  type: 'checkbox',