fix: sync resource toggle states with context on initial load

- Replace defaultChecked with checked for controlled components
- Add useEffect to sync rulesEnabled, ssoEnabled, whitelistEnabled
  when resource context hydrates after mount
- Add nullish coalescing fallback to prevent undefined initial state
This commit is contained in:
Abhinav-kodes
2026-02-25 22:07:08 +05:30
parent 8ea6d9fa67
commit c600da71e3
2 changed files with 20 additions and 6 deletions

View File

@@ -187,7 +187,11 @@ export default function ResourceAuthenticationPage() {
number | null number | null
>(null); >(null);
const [ssoEnabled, setSsoEnabled] = useState(resource.sso); const [ssoEnabled, setSsoEnabled] = useState(resource.sso ?? false);
useEffect(() => {
setSsoEnabled(resource.sso ?? false);
}, [resource.sso]);
const [selectedIdpId, setSelectedIdpId] = useState<number | null>( const [selectedIdpId, setSelectedIdpId] = useState<number | null>(
resource.skipToIdpId || null resource.skipToIdpId || null
@@ -472,7 +476,7 @@ export default function ResourceAuthenticationPage() {
<SwitchInput <SwitchInput
id="sso-toggle" id="sso-toggle"
label={t("ssoUse")} label={t("ssoUse")}
defaultChecked={resource.sso} checked={ssoEnabled}
onCheckedChange={(val) => setSsoEnabled(val)} onCheckedChange={(val) => setSsoEnabled(val)}
/> />
@@ -800,8 +804,13 @@ function OneTimePasswordFormSection({
}: OneTimePasswordFormSectionProps) { }: OneTimePasswordFormSectionProps) {
const { env } = useEnvContext(); const { env } = useEnvContext();
const [whitelistEnabled, setWhitelistEnabled] = useState( const [whitelistEnabled, setWhitelistEnabled] = useState(
resource.emailWhitelistEnabled resource.emailWhitelistEnabled ?? false
); );
useEffect(() => {
setWhitelistEnabled(resource.emailWhitelistEnabled);
}, [resource.emailWhitelistEnabled]);
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [loadingSaveWhitelist, startTransition] = useTransition(); const [loadingSaveWhitelist, startTransition] = useTransition();
@@ -894,7 +903,7 @@ function OneTimePasswordFormSection({
<SwitchInput <SwitchInput
id="whitelist-toggle" id="whitelist-toggle"
label={t("otpEmailWhitelist")} label={t("otpEmailWhitelist")}
defaultChecked={resource.emailWhitelistEnabled} checked={whitelistEnabled}
onCheckedChange={setWhitelistEnabled} onCheckedChange={setWhitelistEnabled}
disabled={!env.email.emailEnabled} disabled={!env.email.emailEnabled}
/> />

View File

@@ -113,7 +113,12 @@ export default function ResourceRules(props: {
const [rulesToRemove, setRulesToRemove] = useState<number[]>([]); const [rulesToRemove, setRulesToRemove] = useState<number[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [pageLoading, setPageLoading] = useState(true); const [pageLoading, setPageLoading] = useState(true);
const [rulesEnabled, setRulesEnabled] = useState(resource.applyRules); const [rulesEnabled, setRulesEnabled] = useState(resource.applyRules ?? false);
useEffect(() => {
setRulesEnabled(resource.applyRules);
}, [resource.applyRules]);
const [openCountrySelect, setOpenCountrySelect] = useState(false); const [openCountrySelect, setOpenCountrySelect] = useState(false);
const [countrySelectValue, setCountrySelectValue] = useState(""); const [countrySelectValue, setCountrySelectValue] = useState("");
const [openAddRuleCountrySelect, setOpenAddRuleCountrySelect] = const [openAddRuleCountrySelect, setOpenAddRuleCountrySelect] =
@@ -836,7 +841,7 @@ export default function ResourceRules(props: {
<SwitchInput <SwitchInput
id="rules-toggle" id="rules-toggle"
label={t("rulesEnable")} label={t("rulesEnable")}
defaultChecked={rulesEnabled} checked={rulesEnabled}
onCheckedChange={(val) => setRulesEnabled(val)} onCheckedChange={(val) => setRulesEnabled(val)}
/> />
</div> </div>