Merge pull request #878 from traPtitech/fix/875

部員認証のラジオボタン切り替え時エラーの修正
traPtitech · Mar 10, 2024 · 5f6da44 · 5f6da44
2 parents 1c68808 + 3711542
commit 5f6da44
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/dashboard/src/components/templates/app/WebsiteSettings.tsx b/dashboard/src/components/templates/app/WebsiteSettings.tsx
@@ -365,7 +365,18 @@ export const WebsiteSetting = (props: WebsiteSettingProps) => {
               </WarningsContainer>
             </Show>
           </FormItem>
-          <Field of={props.formStore} name={'website.authentication'} type="number">
+          {/* website.authenticationがnumberであるため型としてはtype="number"の指定が正しいが、numberを指定すると入力時のonInput内でinput.valueAsNumberが使用される。すると、RadioGroup内で使用されているinput要素はtype="number"等が指定されていない(kobalteのRadioGroupではもともと文字列のみが扱える)ため、valueAsNumberでの取得結果がNaNになってしまい正しくsetValueできない。そのためtype="string"を指定してinput.valueが使用されるようにしています */}
+          {/* see: https://github.com/traPtitech/NeoShowcase/pull/878#issuecomment-1953994009 */}
+          <Field
+            of={props.formStore}
+            name={'website.authentication'}
+            // @ts-expect-error
+            type="string"
+            transform={(v) => {
+              if (v === undefined) return AuthenticationType.OFF
+              return authenticationTypeOptionsMap[v]
+            }}
+          >
             {(field, fieldProps) => (
               <RadioGroup<`${AuthenticationType}`>
                 label="部員認証"
@@ -381,18 +392,15 @@ export const WebsiteSetting = (props: WebsiteSettingProps) => {
                     ),
                   },
                 }}
+                {...fieldProps}
                 tooltip={{
                   props: {
                     content: `${getValue(props.formStore, 'website.domain')}では部員認証が使用できません`,
                   },
                   disabled: getValue(props.formStore, 'website.authAvailable') && props.hasPermission,
                 }}
-                {...fieldProps}
                 options={authenticationTypeOptions}
                 value={`${field.value ?? AuthenticationType.OFF}`}
-                setValue={(value) => {
-                  setValue(props.formStore, 'website.authentication', authenticationTypeOptionsMap[value])
-                }}
                 disabled={!getValue(props.formStore, 'website.authAvailable')}
                 readOnly={!props.hasPermission}
               />