fix dev EditInPlace

locales/en/app.json

@@ -65,7 +65,7 @@
     "always_show_iphone_earpiece": "Show iPhone earpiece option on all platforms",
     "crypto_version": "Crypto version: {{version}}",
     "custom_livekit_url": {
-      "current_url": "Overwrite: ",
+      "current_url": "Currently set to: ",
       "from_config": "Currently, no overwrite is set. Url from well-known or config is used.",
       "label": "Custom Livekit-url",
       "reset": "Reset overwrite",

src/settings/DeveloperSettingsTab.tsx

@@ -96,7 +96,10 @@ export const DeveloperSettingsTab: FC<Props> = ({
     customLivekitUrlSetting,
   );
   const [customLivekitUrlTextBuffer, setCustomLivekitUrlTextBuffer] =
-    useState("");
+    useState(customLivekitUrl);
+  useEffect(() => {
+    setCustomLivekitUrlTextBuffer(customLivekitUrl);
+  }, [customLivekitUrl]);
 
   const [muteAllAudio, setMuteAllAudio] = useSetting(muteAllAudioSetting);
 
@@ -114,7 +117,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
   }, [livekitRooms]);
 
   return (
-    <Form onSubmit={(e) => e.preventDefault()}>
+    <>
       <p>
         {t("developer_mode.hostname", {
           hostname: window.location.hostname || "unknown",
@@ -227,7 +230,6 @@ export const DeveloperSettingsTab: FC<Props> = ({
         cancelButtonLabel={t("developer_mode.custom_livekit_url.reset")}
         onSave={useCallback(
           (e: React.FormEvent<HTMLFormElement>) => {
-            // e.preventDefault();
             setCustomLivekitUrl(
               customLivekitUrlTextBuffer === ""
                 ? null
@@ -236,6 +238,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
           },
           [setCustomLivekitUrl, customLivekitUrlTextBuffer],
         )}
+        value={customLivekitUrlTextBuffer ?? ""}
         onChange={useCallback(
           (event: ChangeEvent<HTMLInputElement>): void => {
             setCustomLivekitUrlTextBuffer(event.target.value);
@@ -244,7 +247,6 @@ export const DeveloperSettingsTab: FC<Props> = ({
         )}
         onCancel={useCallback(
           (e: React.FormEvent<HTMLFormElement>) => {
-            // e.preventDefault();
             setCustomLivekitUrl(null);
           },
           [setCustomLivekitUrl],
@@ -253,6 +255,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
       <Heading as="h3" type="body" weight="semibold" size="lg">
         {t("developer_mode.matrixRTCMode.title")}
       </Heading>
+      <Form>
         <InlineField
           name={matrixRTCModeRadioGroup}
           control={
@@ -299,6 +302,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
             {t("developer_mode.matrixRTCMode.Matrix_2_0.description")}
           </HelpMessage>
         </InlineField>
+      </Form>
       {livekitRooms?.map((livekitRoom) => (
         <>
           <h3>
@@ -323,6 +327,6 @@ export const DeveloperSettingsTab: FC<Props> = ({
       <pre>{JSON.stringify(env, null, 2)}</pre>
       <p>{t("developer_mode.url_params")}</p>
       <pre>{JSON.stringify(urlParams, null, 2)}</pre>
-    </Form>
+    </>
   );
 };

src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap

@@ -2,9 +2,6 @@
 
 exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
 <div>
-  <form
-    class="_root_19upo_16"
-  >
   <p>
     Hostname: localhost
   </p>
@@ -211,6 +208,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
           id="radix-«r6»"
           name="input"
           title=""
+          value=""
         />
       </div>
       <span
@@ -226,6 +224,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
   >
     MatrixRTC mode
   </h3>
+  <form
+    class="_root_19upo_16"
+  >
     <div
       class="_inline-field_19upo_32"
     >
@@ -347,6 +348,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         </span>
       </div>
     </div>
+  </form>
   <h3>
     LiveKit SFU: wss://local-sfu.example.org
   </h3>
@@ -405,6 +407,5 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
   "answer": 42
 }
   </pre>
-  </form>
 </div>
 `;