fix(client): proper read-only form field props and styles

neopostmodern · Apr 30, 2023 · 8b0c4ff · 8b0c4ff
1 parent a37b0f8
commit 8b0c4ff
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/client/src/renderer/components/fields/LinkNameField.tsx b/client/src/renderer/components/fields/LinkNameField.tsx
@@ -44,7 +44,7 @@ const LinkNameField: React.FC<LinkNameFieldProps> = ({
   url,
   name,
   linkId,
-  readOnly = false,
+  readOnly: forceReadOnly = false,
 }) => {
   const { setValue, getValues } = useFormContext();
 
@@ -65,6 +65,7 @@ const LinkNameField: React.FC<LinkNameFieldProps> = ({
   );
 
   const isOnline = useIsOnline();
+  const readOnly = !isOnline || forceReadOnly;
   const suggestions =
     titleSuggestionsQuery.state === DataState.DATA
       ? titleSuggestionsQuery.data.titleSuggestions
@@ -90,6 +91,7 @@ const LinkNameField: React.FC<LinkNameFieldProps> = ({
           disableClearable
           freeSolo
           openOnFocus
+          readOnly={readOnly}
           renderInput={({ ...params }) => (
             <NameInput
               type="text"
@@ -102,7 +104,7 @@ const LinkNameField: React.FC<LinkNameFieldProps> = ({
                 fetchTitleSuggestions();
               }}
               label="Title"
-              disabled={!isOnline || readOnly}
+              InputProps={{ readOnly }}
             />
           )}
           renderOption={(props, suggestion) => {

diff --git a/client/src/renderer/components/fields/UrlField.tsx b/client/src/renderer/components/fields/UrlField.tsx
@@ -2,6 +2,7 @@ import { ContentCopy, Launch, Share } from '@mui/icons-material';
 import { Box, IconButton, Tooltip } from '@mui/material';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
+import useIsOnline from '../../hooks/useIsOnline';
 import { openInDefaultBrowser, shareUrl } from '../../utils/openWith';
 import { StructureTextField } from '../formComponents';
 
@@ -10,16 +11,22 @@ interface UrlFieldProps {
   readOnly?: boolean;
 }
 
-const UrlField: React.FC<UrlFieldProps> = ({ name, readOnly = false }) => {
+const UrlField: React.FC<UrlFieldProps> = ({
+  name,
+  readOnly: forceReadOnly = false,
+}) => {
   const { watch, register, getValues, formState } = useFormContext();
 
+  const isOnline = useIsOnline();
+  const readOnly = !isOnline || forceReadOnly;
+
   return (
     <>
       <Box display="flex" alignItems="end">
         <StructureTextField
           type="text"
           label="URL"
-          disabled={readOnly}
+          InputProps={{ readOnly }}
           {...register(name)}
         />
         <Tooltip title="Copy URL">

diff --git a/client/src/renderer/components/formComponents.tsx b/client/src/renderer/components/formComponents.tsx
@@ -19,6 +19,10 @@ export const StructureTextField = styled(TextField).attrs({
     ${FORM_SUBHEADER_STYLES}
     font-size: 1.07rem; // 0.8rem / 0.75 scale
   }
+  .MuiInputBase-readOnly:after,
+  .MuiInputBase-readOnly:before {
+    border-bottom-color: transparent !important;
+  }
 `;
 
 export const NameInput = styled(StructureTextField)`