Fixes check state for checkboxes

Author: d13

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -1353,7 +1353,7 @@ export function GraphWrapper({
 													<GlCheckbox
 														value="onlyFollowFirstParent"
 														onChange={handleFilterChange}
-														defaultChecked={graphConfig?.onlyFollowFirstParent ?? false}
+														checked={graphConfig?.onlyFollowFirstParent ?? false}
 													>
 														Simplify Merge History
 													</GlCheckbox>
@@ -1364,7 +1364,7 @@ export function GraphWrapper({
 												<GlCheckbox
 													value="remotes"
 													onChange={handleFilterChange}
-													defaultChecked={excludeTypes?.remotes ?? false}
+													checked={excludeTypes?.remotes ?? false}
 												>
 													Hide Remote-only Branches
 												</GlCheckbox>
@@ -1373,7 +1373,7 @@ export function GraphWrapper({
 												<GlCheckbox
 													value="stashes"
 													onChange={handleFilterChange}
-													defaultChecked={excludeTypes?.stashes ?? false}
+													checked={excludeTypes?.stashes ?? false}
 												>
 													Hide Stashes
 												</GlCheckbox>
@@ -1384,7 +1384,7 @@ export function GraphWrapper({
 										<GlCheckbox
 											value="tags"
 											onChange={handleFilterChange}
-											defaultChecked={excludeTypes?.tags ?? false}
+											checked={excludeTypes?.tags ?? false}
 										>
 											Hide Tags
 										</GlCheckbox>
@@ -1394,7 +1394,7 @@ export function GraphWrapper({
 										<GlCheckbox
 											value="mergeCommits"
 											onChange={handleFilterChange}
-											defaultChecked={graphConfig?.dimMergeCommits ?? false}
+											checked={graphConfig?.dimMergeCommits ?? false}
 										>
 											Dim Merge Commit Rows
 										</GlCheckbox>
@@ -1474,7 +1474,7 @@ export function GraphWrapper({
 											<GlCheckbox
 												value="localBranches"
 												onChange={handleOnMinimapAdditionalTypesChange}
-												defaultChecked={
+												checked={
 													graphConfig?.minimapMarkerTypes?.includes('localBranches') ?? false
 												}
 											>
@@ -1489,7 +1489,7 @@ export function GraphWrapper({
 											<GlCheckbox
 												value="remoteBranches"
 												onChange={handleOnMinimapAdditionalTypesChange}
-												defaultChecked={
+												checked={
 													graphConfig?.minimapMarkerTypes?.includes('remoteBranches') ?? true
 												}
 											>
@@ -1504,7 +1504,7 @@ export function GraphWrapper({
 											<GlCheckbox
 												value="pullRequests"
 												onChange={handleOnMinimapAdditionalTypesChange}
-												defaultChecked={
+												checked={
 													graphConfig?.minimapMarkerTypes?.includes('pullRequests') ?? true
 												}
 											>
@@ -1519,9 +1519,7 @@ export function GraphWrapper({
 											<GlCheckbox
 												value="stashes"
 												onChange={handleOnMinimapAdditionalTypesChange}
-												defaultChecked={
-													graphConfig?.minimapMarkerTypes?.includes('stashes') ?? false
-												}
+												checked={graphConfig?.minimapMarkerTypes?.includes('stashes') ?? false}
 											>
 												<span className="minimap-marker-swatch" data-marker="stashes"></span>
 												Stashes
@@ -1531,9 +1529,7 @@ export function GraphWrapper({
 											<GlCheckbox
 												value="tags"
 												onChange={handleOnMinimapAdditionalTypesChange}
-												defaultChecked={
-													graphConfig?.minimapMarkerTypes?.includes('tags') ?? true
-												}
+												checked={graphConfig?.minimapMarkerTypes?.includes('tags') ?? true}
 											>
 												<span className="minimap-marker-swatch" data-marker="tags"></span>
 												Tags

src/webviews/apps/shared/components/checkbox/checkbox.ts

@@ -1,6 +1,5 @@
 import { html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
+import { customElement, property } from 'lit/decorators.js';
 import { GlElement, observe } from '../element';
 import { checkboxBaseStyles } from '../forms/checkbox.css';
 import { checkboxStyles } from './checkbox.css';
@@ -18,22 +17,25 @@ export class Checkbox extends GlElement {
 
 	static override readonly styles = [checkboxBaseStyles, checkboxStyles];
 
-	@property({ type: Boolean })
-	disabled: boolean;
+	@property({ type: Boolean, reflect: true })
+	disabled: boolean = false;
 
 	@property({ type: String })
 	value: string = '';
 
+	_defaultChecked: boolean = false;
 	@property({ type: Boolean })
-	defaultChecked: boolean = false;
+	get defaultChecked() {
+		return this._defaultChecked;
+	}
 
-	@state()
-	checked: boolean;
+	@property({ type: Boolean, reflect: true })
+	checked: boolean = false;
 
 	constructor() {
 		super();
 		this.disabled = false;
-		this.checked = this.defaultChecked;
+		this._defaultChecked = this.checked;
 	}
 
 	@observe(['defaultChecked'], { afterFirstUpdate: true })

src/webviews/apps/shared/components/radio/radio.ts

@@ -27,7 +27,7 @@ export class Radio extends GlElement {
 	@property({ type: String, reflect: true })
 	name?: string;
 
-	@property({ type: Boolean, attribute: false })
+	@property({ type: Boolean, reflect: true })
 	checked: boolean = false;
 
 	private _parentGroup: RadioGroup | undefined = undefined;