2 files changed, 15 insertions, 13 deletions
diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 7c97f0d844..f0510a91be 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -449,18 +449,19 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                     <AriaInput>
                       <Cell.Switch
                         ref={this.customDnsSwitchRef}
-                        isOn={this.props.dns.custom}
+                        isOn={this.props.dns.custom || this.state.showAddCustomDns}
                         onChange={this.setCustomDnsEnabled}
                       />
                     </AriaInput>
                   </AriaInputGroup>
                 </StyledCustomDnsSwitchContainer>
-                <Accordion expanded={this.props.dns.custom}>
+                <Accordion expanded={this.props.dns.custom || this.state.showAddCustomDns}>
                   <CellList items={this.customDnsItems()} onRemove={this.removeDnsAddress} />
 
                   {this.state.showAddCustomDns && (
                     <div ref={this.customDnsInputContainerRef}>
                       <Cell.RowInput
+                        placeholder={messages.pgettext('advanced-settings-view', 'e.g. 10.0.0.4')}
                         onSubmit={this.addDnsAddress}
                         onChange={this.addDnsInputChange}
                         invalid={this.state.invalidDnsIp}
@@ -511,10 +512,12 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
   }
 
   private setCustomDnsEnabled = async (enabled: boolean) => {
-    await this.props.setDnsOptions({
-      custom: enabled,
-      addresses: this.props.dns.addresses,
-    });
+    if (this.props.dns.addresses.length > 0) {
+      await this.props.setDnsOptions({
+        custom: enabled,
+        addresses: this.props.dns.addresses,
+      });
+    }
 
     if (enabled && this.props.dns.addresses.length === 0) {
       this.showAddCustomDnsRow();
@@ -548,16 +551,13 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
     ) {
       event?.target.focus();
     } else {
-      this.hideAddCustomDnsRow(false);
+      this.hideAddCustomDnsRow();
     }
   };
 
-  private hideAddCustomDnsRow(justAdded: boolean) {
+  private hideAddCustomDnsRow() {
     if (!this.state.publicDnsIpToConfirm) {
       this.setState({ showAddCustomDns: false });
-      if (!justAdded && this.props.dns.addresses.length === 0) {
-        consumePromise(this.setCustomDnsEnabled(false));
-      }
     }
   }
 
@@ -581,10 +581,10 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
       } else {
         try {
           await this.props.setDnsOptions({
-            custom: this.props.dns.custom,
+            custom: this.props.dns.custom || this.state.showAddCustomDns,
             addresses: [...this.props.dns.addresses, address],
           });
-          this.hideAddCustomDnsRow(true);
+          this.hideAddCustomDnsRow();
         } catch (_e) {
           this.setState({ invalidDnsIp: true });
         }
diff --git a/gui/src/renderer/components/cell/Input.tsx b/gui/src/renderer/components/cell/Input.tsx
index 0ab5b4c493..f464adf269 100644
--- a/gui/src/renderer/components/cell/Input.tsx
+++ b/gui/src/renderer/components/cell/Input.tsx
@@ -244,6 +244,7 @@ interface IRowInputProps {
   paddingLeft?: number;
   invalid?: boolean;
   autofocus?: boolean;
+  placeholder?: string;
 }
 
 export function RowInput(props: IRowInputProps) {
@@ -309,6 +310,7 @@ export function RowInput(props: IRowInputProps) {
           invalid={props.invalid}
           onFocus={props.onFocus}
           onBlur={props.onBlur}
+          placeholder={props.placeholder}
         />
       </StyledInputWrapper>
       <StyledSubmitButton onClick={submit}>