Give input selectors a default placeholder

Much better than the default "Select..."
webkom · Oct 14, 2023 · 424a6f1 · 424a6f1
1 parent 11da240
commit 424a6f1
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 9 deletions.
diff --git a/app/components/Form/Field.tsx b/app/components/Form/Field.tsx
@@ -107,7 +107,7 @@ export function createField(Component: ComponentType<any>, options?: Options) {
     const hasError = showErrors && touched && anyError?.length > 0;
     const hasWarning = showErrors && touched && warning?.length > 0;
     const fieldName = input?.name;
-    const inlineLabel = options?.inlineLabel;
+    const { noLabel, inlineLabel } = options || {};
 
     const labelComponent = (
       <Flex alignItems="center">
@@ -137,6 +137,7 @@ export function createField(Component: ComponentType<any>, options?: Options) {
       <Component
         {...input}
         {...props}
+        label={!noLabel && !inlineLabel && label}
         onChange={(value) => {
           input.onChange?.(value);
           onChange?.(value);
@@ -163,7 +164,7 @@ export function createField(Component: ComponentType<any>, options?: Options) {
 
     return (
       <div className={cx(styles.field, fieldClassName)} style={fieldStyle}>
-        {options?.noLabel ? content : <label>{content}</label>}
+        {noLabel ? content : <label>{content}</label>}
         {hasError && (
           <RenderErrorMessage error={anyError} fieldName={fieldName} />
         )}

diff --git a/app/components/Form/SelectInput.tsx b/app/components/Form/SelectInput.tsx
@@ -9,6 +9,7 @@ import type { GroupBase, StylesConfig, ThemeConfig } from 'react-select';
 
 type Props = {
   name: string;
+  label: string;
   placeholder?: string;
   multiple?: boolean;
   tags?: boolean;
@@ -93,6 +94,7 @@ export const selectTheme = (
 
 function SelectInput({
   name,
+  label,
   fetching,
   selectStyle,
   onBlur,
@@ -110,13 +112,15 @@ function SelectInput({
     props.isMulti = true;
   }
 
+  const defaultPlaceholder = `Velg ${label?.toLowerCase()}`;
+
   if (creatable) {
     return (
       <div className={style.field}>
         <Creatable
           {...props}
           isDisabled={disabled}
-          placeholder={!disabled && placeholder}
+          placeholder={!disabled && (placeholder || defaultPlaceholder)}
           instanceId={name}
           isMulti={props.isMulti}
           onBlur={() => onBlur(value)}
@@ -144,7 +148,7 @@ function SelectInput({
       <Select
         {...props}
         isDisabled={disabled}
-        placeholder={disabled ? 'Tomt' : placeholder}
+        placeholder={disabled ? 'Tomt' : placeholder || defaultPlaceholder}
         instanceId={name}
         shouldKeyDownEventCreateNewOption={shouldKeyDownEventCreateNewOption}
         onBlur={() => onBlur(value)}

diff --git a/app/routes/admin/email/components/EmailUserEditor.tsx b/app/routes/admin/email/components/EmailUserEditor.tsx
@@ -61,7 +61,6 @@ const EmailUserEditor = ({
         name="user"
         required
         disabled={emailUserId}
-        placeholder="Velg bruker"
         filter={['users.user']}
         component={SelectInput.AutocompleteField}
         onChange={(data) => onUserChange(data as any as AutocompleteUserValue)}

diff --git a/app/routes/admin/groups/components/AddGroupMember.tsx b/app/routes/admin/groups/components/AddGroupMember.tsx
@@ -32,7 +32,6 @@ const AddGroupMember = ({ submitting, handleSubmit }: Props) => {
       <Field
         label="Rolle"
         name="role"
-        placeholder="Velg rolle"
         options={roles}
         component={SelectInput.Field}
       />

diff --git a/app/routes/contact/components/ContactForm.tsx b/app/routes/contact/components/ContactForm.tsx
@@ -92,7 +92,6 @@ const ContactForm = (props: Props) => {
       </p>
 
       <Field
-        placeholder="Velg mottaker"
         label="Mottaker"
         name="recipient_group"
         value={hsRecipient}

diff --git a/app/routes/events/EventCreateRoute.ts b/app/routes/events/EventCreateRoute.ts
@@ -84,7 +84,7 @@ const mapStateToProps = (state, props) => {
       eventType: '',
       eventStatusType: {
         value: 'TBA',
-        label: 'Ikke bestemt(TBA)',
+        label: 'Ikke bestemt (TBA)',
       },
       company: null,
       responsibleGroup: null,

diff --git a/app/routes/events/components/EventEditor/index.tsx b/app/routes/events/components/EventEditor/index.tsx
@@ -347,6 +347,7 @@ function EventEditor({
               <div className={styles.subSection}>
                 <Field
                   name="canViewGroups"
+                  placeholder="Velg grupper"
                   filter={['users.abakusgroup']}
                   fieldClassName={styles.metaField}
                   component={SelectInput.AutocompleteField}

diff --git a/app/routes/surveys/components/SurveyEditor/SurveyEditor.tsx b/app/routes/surveys/components/SurveyEditor/SurveyEditor.tsx
@@ -296,7 +296,6 @@ const SurveyEditor = ({
                 }}
               >
                 <Field
-                  placeholder="Velg arrangement"
                   label="Arrangement"
                   autoFocus={autoFocus}
                   name="event"