fix(ui-mode): use onChange instead of onClick for <input type='checkbox' (#33636)

packages/trace-viewer/src/ui/settingsView.tsx

@@ -30,7 +30,7 @@ export const SettingsView: React.FunctionComponent<{
     {settings.map(({ value, set, title }) => {
       return <div key={title} className='setting'>
         <label>
-          <input type='checkbox' checked={value} onClick={() => set(!value)}/>
+          <input type='checkbox' checked={value} onChange={() => set(!value)}/>
           {title}
         </label>
       </div>;

packages/trace-viewer/src/ui/uiModeFiltersView.tsx

@@ -62,7 +62,7 @@ export const FiltersView: React.FC<{
         {[...statusFilters.entries()].map(([status, value]) => {
           return <div className='filter-entry' key={status} role='listitem'>
             <label>
-              <input type='checkbox' checked={value} onClick={() => {
+              <input type='checkbox' checked={value} onChange={() => {
                 const copy = new Map(statusFilters);
                 copy.set(status, !copy.get(status));
                 setStatusFilters(copy);
@@ -76,7 +76,7 @@ export const FiltersView: React.FC<{
         {[...projectFilters.entries()].map(([projectName, value]) => {
           return <div className='filter-entry' key={projectName}  role='listitem'>
             <label>
-              <input type='checkbox' checked={value} onClick={() => {
+              <input type='checkbox' checked={value} onChange={() => {
                 const copy = new Map(projectFilters);
                 copy.set(projectName, !copy.get(projectName));
                 setProjectFilters(copy);