Merge pull request #322 from corona-school/fix/create-appointment-inp…

…ut-on-safari

fix: input problem on appointment creation on safari

src/pages/create-appointment/AppointmentForm.tsx

@@ -1,4 +1,4 @@
-import { Box, FormControl, Select, Stack, TextArea, useBreakpointValue, VStack, WarningTwoIcon } from 'native-base';
+import { Box, FormControl, Stack, TextArea, useBreakpointValue, VStack, WarningTwoIcon } from 'native-base';
 import { useTranslation } from 'react-i18next';
 import DatePicker from '../../components/DatePicker';
 import { useCreateAppointment } from '../../context/AppointmentContext';
@@ -9,6 +9,7 @@ import { useCallback, useState } from 'react';
 import { FormErrors } from './AppointmentCreation';
 import { isDateToday } from '../../helper/appointment-helper';
 import { DateTime } from 'luxon';
+import Select from '../../widgets/Select';
 
 type FormProps = {
     errors: FormErrors;
@@ -26,14 +27,14 @@ const AppointmentForm: React.FC<FormProps> = ({ errors, appointmentsCount, onSet
         lg: '50%',
     });
 
-    const [title, setTitle] = useState('');
-    const [description, setDescription] = useState('');
-    const [date, setDate] = useState('');
-    const [time, setTime] = useState('');
+    const [title, setTitle] = useState<string>('');
+    const [description, setDescription] = useState<string>('');
+    const [date, setDate] = useState<string>('');
+    const [time, setTime] = useState<string>('');
     const [isToday, setIsToday] = useState<boolean>(false);
 
-    const handleTitleInput = (e: any) => {
-        setTitle(e.target.value);
+    const handleTitleInput = (text: string) => {
+        setTitle(text);
     };
 
     const handleDurationSelection = (e: any) => {
@@ -138,7 +139,7 @@ const AppointmentForm: React.FC<FormProps> = ({ errors, appointmentsCount, onSet
                     {/* DURATION */}
                     <FormControl isInvalid={'duration' in errors} width={inputWidth}>
                         <FormControl.Label>{t('appointment.create.durationLabel')}</FormControl.Label>
-                        <Select placeholder="Dauer der Unterrichtseinheit" onValueChange={(e) => handleDurationSelection(e)}>
+                        <Select placeholder="Dauer der Unterrichtseinheit" onValueChange={(duration: string) => handleDurationSelection(duration)}>
                             <Select.Item value="15" label={t('course.selectOptions._15minutes')} />
                             <Select.Item value="30" label={t('course.selectOptions._30minutes')} />
                             <Select.Item value="45" label={t('course.selectOptions._45minutes')} />

src/widgets/Select.tsx

@@ -0,0 +1,11 @@
+import { Select as NBSelect } from 'native-base';
+
+const Select = (props: any) => {
+    const isSafari = () => /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
+
+    return <NBSelect {...props} selection={isSafari() ? 1 : null} />;
+};
+
+Select.Item = NBSelect.Item;
+export default Select;
+export { Select };