Fix: required attribute not passed to select element (#2944)

* fix: required atribute not passed to select element

* changeset

Author: m1aw

.changeset/dirty-lizards-thank.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Fix bug where Country field and State field where not showing the correct required attribute.

packages/lib/src/components/internal/Address/components/CountryField.tsx

@@ -19,7 +19,7 @@ const formatCountries = (countries: Array<CountryFieldItem>, allowedCountries: s
 };
 
 export default function CountryField(props: CountryFieldProps) {
-    const { allowedCountries = [], classNameModifiers = [], errorMessage, onDropdownChange, value } = props;
+    const { allowedCountries = [], classNameModifiers = [], errorMessage, onDropdownChange, value, required } = props;
     const { i18n, loadingContext } = useCoreContext();
     const [countries, setCountries] = useState<CountryFieldItem[]>([]);
     const [loaded, setLoaded] = useState<boolean>(false);
@@ -53,7 +53,14 @@ export default function CountryField(props: CountryFieldProps) {
             i18n={i18n}
             readOnly={readOnly && !!value}
         >
-            <Select onChange={onDropdownChange} name={'country'} selectedValue={value} items={countries} readonly={readOnly && !!value} />
+            <Select
+                onChange={onDropdownChange}
+                name={'country'}
+                selectedValue={value}
+                items={countries}
+                readonly={readOnly && !!value}
+                required={required}
+            />
         </Field>
     );
 }

packages/lib/src/components/internal/Address/components/FieldContainer.tsx

@@ -45,6 +45,7 @@ function FieldContainer(props: FieldContainerProps) {
                     errorMessage={errorMessage}
                     onDropdownChange={props.onDropdownChange}
                     value={value}
+                    required={!isOptional}
                 />
             );
         case 'stateOrProvince':
@@ -57,6 +58,7 @@ function FieldContainer(props: FieldContainerProps) {
                     selectedCountry={selectedCountry}
                     specifications={props.specifications}
                     value={value}
+                    required={!isOptional}
                 />
             );
         default:

packages/lib/src/components/internal/Address/components/StateField.tsx

@@ -7,7 +7,7 @@ import { StateFieldItem, StateFieldProps } from '../types';
 import Select from '../../FormFields/Select';
 
 export default function StateField(props: StateFieldProps) {
-    const { classNameModifiers, label, onDropdownChange, readOnly, selectedCountry, specifications, value } = props;
+    const { classNameModifiers, label, onDropdownChange, readOnly, selectedCountry, specifications, value, required } = props;
     const { i18n, loadingContext } = useCoreContext();
     const [states, setStates] = useState<StateFieldItem[]>([]);
     const [loaded, setLoaded] = useState<boolean>(false);
@@ -44,7 +44,14 @@ export default function StateField(props: StateFieldProps) {
             i18n={i18n}
             readOnly={readOnly && !!value}
         >
-            <Select name={'stateOrProvince'} onChange={onDropdownChange} selectedValue={value} items={states} readonly={readOnly && !!value} />
+            <Select
+                name={'stateOrProvince'}
+                onChange={onDropdownChange}
+                selectedValue={value}
+                items={states}
+                required={required}
+                readonly={readOnly && !!value}
+            />
         </Field>
     );
 }

packages/lib/src/components/internal/Address/types.ts

@@ -79,6 +79,7 @@ export interface CountryFieldProps {
     errorMessage: boolean | string;
     onDropdownChange: (e: { target: SelectTargetObject }) => void;
     readOnly?: boolean;
+    required?: boolean;
     value: string;
 }
 
@@ -93,6 +94,7 @@ export interface StateFieldProps {
     errorMessage: boolean | string;
     onDropdownChange: (e: { target: SelectTargetObject }) => void;
     readOnly?: boolean;
+    required?: boolean;
     selectedCountry: string;
     specifications: Specifications;
     value: string;

packages/lib/src/components/internal/FormFields/Select/Select.tsx

@@ -29,7 +29,8 @@ function Select({
     clearOnSelect,
     blurOnClose,
     onListToggle,
-    allowIdOnButton = false
+    allowIdOnButton = false,
+    required
 }: SelectProps) {
     const filterInputRef = useRef(null);
     const selectContainerRef = useRef(null);
@@ -288,6 +289,7 @@ function Select({
                 disabled={disabled}
                 ariaDescribedBy={ariaDescribedBy}
                 allowIdOnButton={allowIdOnButton}
+                required={required}
             />
             <SelectList
                 active={activeOption}

packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx

@@ -14,7 +14,7 @@ function SelectButtonElement({ filterable, toggleButtonRef, ...props }) {
 }
 
 function SelectButton(props: Readonly<SelectButtonProps>) {
-    const { active, selected, inputText, readonly, showList } = props;
+    const { active, selected, inputText, readonly, showList, required } = props;
 
     // display fallback order
     const displayText = selected.selectedOptionName || selected.name || props.placeholder || '';
@@ -88,6 +88,7 @@ function SelectButton(props: Readonly<SelectButtonProps>) {
                         readOnly={props.readonly}
                         id={props.id}
                         aria-describedby={props.ariaDescribedBy}
+                        required={required}
                     />
                     {!showList && selected.secondaryText && (
                         <span className="adyen-checkout__dropdown__button__secondary-text">{selected.secondaryText}</span>

packages/lib/src/components/internal/FormFields/Select/types.ts

@@ -32,6 +32,7 @@ export interface SelectProps {
     onInput?: (value: string) => void;
     placeholder?: string;
     readonly: boolean;
+    required?: boolean;
     selectedValue?: string | number;
     uniqueId?: string;
     disabled?: boolean;
@@ -55,6 +56,7 @@ export interface SelectButtonProps {
     onInput: (e: Event) => void;
     placeholder: string;
     readonly: boolean;
+    required: boolean;
     selectListId: string;
     showList: boolean;
     toggleButtonRef;