Merge pull request #1141 from topcoder-platform/PM-1315

PM-1315 Fix issues on Copilot request form

Author: kkartunov

src/apps/copilots/src/pages/copilot-request-form/index.tsx

@@ -250,8 +250,8 @@ const CopilotRequestForm: FC<{}> = () => {
                     <h1 className={styles.heading}> Copilot Request </h1>
                     <p className={styles.subheading}>
                         Hi,
-                        {profile?.firstName}
                         {' '}
+                        {profile?.firstName}
                         !
                         This form is to request a copilot for your project. Please fill in the details below.
                     </p>
@@ -273,6 +273,7 @@ const CopilotRequestForm: FC<{}> = () => {
                         label='Project'
                         placeholder='Start typing the name of the project'
                         dirty
+                        isClearable
                         error={formErrors.projectId}
                     />
 

src/apps/copilots/src/pages/copilot-request-form/styles.module.scss

@@ -50,7 +50,11 @@ $gradient: linear-gradient(
 
     .skillsWrapper {
         border: 1px solid #aaaaaa;
-        border-radius: 0.375rem; 
+        border-radius: 0.375rem;  
+    }
+
+    .skillsWrapper:hover {
+            border-color: #137D60;
     }
 
     .skillsError {

src/libs/ui/lib/components/form/form-groups/form-input/input-select-react/InputSelectReact.tsx

@@ -48,6 +48,7 @@ interface InputSelectReactProps {
     readonly async?: boolean
     readonly loadOptions?: (inputValue: string, callback: (option: any) => void) => void
     readonly filterOption?: (option: InputSelectOption, value: string) => boolean
+    readonly isClearable?: boolean
 }
 
 /**
@@ -105,11 +106,12 @@ const InputSelectReact: FC<InputSelectReactProps> = props => {
 
     // throw the proper event type to the form handler (needs name & form element on target)
     function handleSelect(option: unknown): void {
+        const selectedOption = option as InputSelectOption | null
         props.onChange({
             target: {
                 form: findParentFrom(wrapRef.current as HTMLDivElement),
                 name: props.name,
-                value: (option as InputSelectOption).value,
+                value: selectedOption?.value || '',
             },
         } as ChangeEvent<HTMLInputElement>)
     }
@@ -162,6 +164,7 @@ const InputSelectReact: FC<InputSelectReactProps> = props => {
                 formatCreateLabel={props.createLabel}
                 onCreateOption={props.onCreateOption}
                 onBlur={handleBlur}
+                isClearable={props.isClearable}
                 backspaceRemovesValue
                 isDisabled={props.disabled}
                 filterOption={props.filterOption}