Add default placeholder for Selection element

* Add default placeholder for Selection element * Fix validation class is not changed after validate Fixes: AFORM-3649
episerver · Nov 6, 2023 · e9d9f20 · e9d9f20
1 parent cb5f476
commit e9d9f20
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/src/@optimizely/forms-react/src/components/elements/NumberElementBlock.tsx b/src/@optimizely/forms-react/src/components/elements/NumberElementBlock.tsx
@@ -1,4 +1,4 @@
-import { Number, extractParams } from "@optimizely/forms-sdk"
+import { Number } from "@optimizely/forms-sdk"
 import React from "react";
 import ElementWrapper from "../ElementWrapper";
 import { useElement } from "../../hooks/useElement";
@@ -11,11 +11,10 @@ export interface NumberElementBlockProps {
 export const NumberElementBlock = (props: NumberElementBlockProps) => {
     const { element } = props;
     const { elementContext, extraAttr, validatorClasses, handleChange, handleBlur, checkVisible } = useElement(element);
-    const { language } = extractParams(window.location.pathname)
 
     return (
         <ElementWrapper className={`FormTextbox FormTextbox--Number ${validatorClasses ?? ""}`} isVisible={checkVisible()}>
-            <div lang={language}>
+            <div lang={element.locale}>
                 <ElementCaption element={element} />
 
                 <input

diff --git a/src/@optimizely/forms-react/src/components/elements/SelectionElementBlock.tsx b/src/@optimizely/forms-react/src/components/elements/SelectionElementBlock.tsx
@@ -1,4 +1,4 @@
-import { Selection } from "@optimizely/forms-sdk"
+import { Selection, isNullOrEmpty } from "@optimizely/forms-sdk"
 import React from "react";
 import ElementWrapper from "../ElementWrapper";
 import { useElement } from "../../hooks/useElement";
@@ -11,6 +11,7 @@ export interface SelectionElementBlockProps {
 export const SelectionElementBlock = (props: SelectionElementBlockProps) => {
     const { element } = props;
     const { elementContext, extraAttr, validatorClasses, handleChange, handleBlur, checkVisible } = useElement(element);
+    const defaultOptionSelected = !element.properties.allowMultiSelect && !element.properties.items.some(i => i.checked);
     return (
         <ElementWrapper className={`FormSelection ${validatorClasses}`} isVisible={checkVisible()}>
             <ElementCaption element={element}></ElementCaption>
@@ -24,8 +25,11 @@ export const SelectionElementBlock = (props: SelectionElementBlockProps) => {
                 onChange={handleChange}
                 onBlur={handleBlur}
             >
-                <option disabled value={""}>
-                    {element.properties.placeHolder}
+                <option disabled selected={defaultOptionSelected} value="">
+                    {isNullOrEmpty(element.properties.placeHolder) 
+                        ? element.localizations["selectionDefaultPlaceholder"]
+                        : element.properties.placeHolder
+                    }
                 </option>
                 {element.properties.items.map(feed => (
                     <option key={feed.value} value={feed.value} defaultChecked={feed.checked}>{feed.caption}</option>

diff --git a/src/@optimizely/forms-react/src/hooks/useElement.ts b/src/@optimizely/forms-react/src/hooks/useElement.ts
@@ -10,14 +10,12 @@ import {
     ValidatorType,
     SatisfiedActionType,
     FormValidationResult,
-    FormSubmission,
-    FormValidation,
-    FormDependencies,
     //functions
     equals, 
     getDefaultValue, 
     isNull, 
-    isNullOrEmpty, 
+    isNullOrEmpty,
+    isInArray,
     //class
     FormValidator
     } from "@optimizely/forms-sdk";
@@ -133,7 +131,19 @@ export const useElement = (element: FormElementBase) => {
         } as ElementContext);
 
         let isValidationFail = !isNull(validationResults) && validationResults.some(r => !r.valid);
-        validatorClasses.current = `${isValidationFail ? "ValidationFail" : ""} ${validatorClasses.current}`
+        let arrClass = validatorClasses.current.split(" ");
+        let failClass = "ValidationFail";
+        if(isValidationFail){
+            if(!isInArray(failClass, arrClass)){
+                arrClass.push(failClass);
+            }
+        }
+        else {
+            if(isInArray(failClass, arrClass)){
+                arrClass = arrClass.filter(c => c !== failClass);
+            }
+        }
+        validatorClasses.current = arrClass.join(" ");
     }
 
     const checkVisible = (): boolean => {

diff --git a/src/@optimizely/forms-sdk/src/models/elements/base/FormElementBase.ts b/src/@optimizely/forms-sdk/src/models/elements/base/FormElementBase.ts
@@ -6,10 +6,11 @@ export interface FormElementBase {
     contentType: string
     displayName: string
     properties: FormElementPropertiesBase
+    localizations: Record<string, string>
+    locale: string
 }
 
 export interface FormElementPropertiesBase {
     description: string
     label: string
-    localizations: Record<string, string>
 }