Add the correct input type attribute to edit inputs

Dlurak · Oct 16, 2024 · 6fdda51 · 6fdda51
1 parent b104aab
commit 6fdda51
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 6 deletions.
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/MajorKeysEditor.tsx b/src/components/FeaturePanel/EditDialog/EditContent/MajorKeysEditor.tsx
@@ -9,7 +9,7 @@ import { useEditDialogContext } from '../../helpers/EditDialogContext';
 import { useEditContext } from '../EditContext';
 import { OpeningHoursEditor } from './OpeningHoursEditor/OpeningHoursEditor';
 import styled from '@emotion/styled';
-import { CharacterCount } from './helpers';
+import { CharacterCount, getInputTypeForKey } from './helpers';
 
 export const majorKeys = [
   'name',
@@ -21,7 +21,7 @@ export const majorKeys = [
 
 const MAX_INPUT_LENGTH = 255;
 
-const getData = (numberOfWikimediaItems) => {
+const getData = (numberOfWikimediaItems: number) => {
   const wikimediaCommonTags = Array(numberOfWikimediaItems)
     .fill('')
     .reduce((acc, _, index) => {
@@ -47,19 +47,30 @@ const InputContainer = styled.div`
   position: relative;
 `;
 
+type TextFieldProps = {
+  k: string;
+  label: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  value?: string;
+  autoFocus?: boolean;
+};
+
 const TextFieldWithCharacterCount = ({
   k,
   label,
   autoFocus,
   onChange,
   value,
-}) => {
+}: TextFieldProps) => {
   const [isFocused, setIsFocused] = useState(false);
+  const inputType = getInputTypeForKey(k);
+
   return (
     <InputContainer>
       <TextField
         label={label}
-        multiline
+        type={inputType}
+        multiline={inputType === 'text'}
         value={value}
         InputLabelProps={{ shrink: true }}
         variant="outlined"

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/TagsEditor/ValueInput.tsx b/src/components/FeaturePanel/EditDialog/EditContent/TagsEditor/ValueInput.tsx
@@ -3,6 +3,7 @@ import { useEditDialogContext } from '../../../helpers/EditDialogContext';
 import { useEditContext } from '../../EditContext';
 import { IconButton, Stack, TextField } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
+import { getInputTypeForKey } from '../helpers';
 
 const useHidableDeleteButton = () => {
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -34,7 +35,10 @@ const DeleteButton = ({ deleteButton, index }: DeleteButtonProps) => {
     setTagsEntries((state) => state.toSpliced(index, 1));
   };
 
-  return deleteButton.shown ? (
+  if (!deleteButton.shown) {
+    return null;
+  }
+  return (
     <IconButton
       size="small"
       onClick={onClick}
@@ -43,7 +47,7 @@ const DeleteButton = ({ deleteButton, index }: DeleteButtonProps) => {
     >
       <DeleteIcon fontSize="small" />
     </IconButton>
-  ) : null;
+  );
 };
 
 type Props = { index: number };
@@ -65,6 +69,7 @@ export const ValueInput = ({ index }: Props) => {
   return (
     <Stack direction="row" spacing={1} alignItems="center">
       <TextField
+        type={getInputTypeForKey(currentKey)}
         value={currentValue}
         onChange={handleChange}
         fullWidth

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/helpers.tsx b/src/components/FeaturePanel/EditDialog/EditContent/helpers.tsx
@@ -27,3 +27,25 @@ export const CharacterCount = ({
       </Stack>
     </CharacterCountContainer>
   ) : null;
+
+export const getInputTypeForKey = (key: string) => {
+  switch (key) {
+    case 'fax':
+    case 'phone':
+    case 'mobile':
+    case 'contact:phone':
+    case 'contact:whatsapp':
+    case 'contact:mobile':
+    case 'contact:tty':
+    case 'contact:sms':
+    case 'contact:fax':
+      return 'tel';
+    case 'contact:website':
+    case 'website':
+      return 'url';
+    case 'contact:email':
+    case 'email':
+      return 'email';
+  }
+  return 'text';
+};