Merge pull request #8865 from weseek/fix/supress-warning-of-checkbox

fix: Supress warning of checkbox

apps/app/src/components/PageControls/PageControls.tsx

@@ -65,7 +65,7 @@ const Tags = (props: TagsProps): JSX.Element => {
 };
 
 type WideViewMenuItemProps = AdditionalMenuItemsRendererProps & {
-  onClickMenuItem: () => void,
+  onChange: () => void,
   expandContentWidth?: boolean,
 }
 
@@ -73,26 +73,20 @@ const WideViewMenuItem = (props: WideViewMenuItemProps): JSX.Element => {
   const { t } = useTranslation();
 
   const {
-    onClickMenuItem, expandContentWidth,
+    onChange, expandContentWidth,
   } = props;
 
-  const menuItemClickedHandler = useCallback((e: React.MouseEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    onClickMenuItem();
-  }, [onClickMenuItem]);
-
   return (
-    <div
-      className="grw-page-control-dropdown-item dropdown-item"
-      onClick={menuItemClickedHandler}
-    >
-      <div className="form-check form-switch ms-1">
+    <div className="grw-page-control-dropdown-item dropdown-item">
+      <div className="form-check form-switch ms-1 flex-fill d-flex">
         <input
+          id="wide-view-checkbox"
           className="form-check-input"
           type="checkbox"
-          checked={expandContentWidth}
+          defaultChecked={expandContentWidth}
+          onChange={onChange}
         />
-        <label className="form-label form-check-label">
+        <label className="form-check-label flex-grow-1 ms-2" htmlFor="wide-view-checkbox">
           { t('wide_view') }
         </label>
       </div>
@@ -255,7 +249,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
     }
     const wideviewMenuItemRenderer = (props: WideViewMenuItemProps) => {
 
-      return <WideViewMenuItem {...props} onClickMenuItem={switchContentWidthClickHandler} expandContentWidth={expandContentWidth} />;
+      return <WideViewMenuItem {...props} onChange={switchContentWidthClickHandler} expandContentWidth={expandContentWidth} />;
     };
     return wideviewMenuItemRenderer;
   }, [pageInfo, switchContentWidthClickHandler, expandContentWidth]);

apps/app/src/components/Sidebar/PageTree/PageTreeSubstance.tsx

@@ -54,14 +54,16 @@ export const PageTreeHeader = memo(({ isWipPageShown, onWipPageShownChange }: He
         </button>
 
         <ul className="dropdown-menu">
-          <li className="dropdown-item" onClick={onWipPageShownChange}>
-            <div className="form-check form-switch">
+          <li className="dropdown-item">
+            <div className="form-check form-switch flex-fill d-flex">
               <input
+                id="show-wip-page-checkbox"
                 className="form-check-input"
                 type="checkbox"
-                checked={isWipPageShown}
+                defaultChecked={isWipPageShown}
+                onChange={onWipPageShownChange}
               />
-              <label className="form-label form-check-label text-muted mb-0">
+              <label className="form-check-label flex-grow-1 ms-2" htmlFor="show-wip-page-checkbox">
                 {t('sidebar_header.show_wip_page')}
               </label>
             </div>