diff --git a/forms-flow-components/src/components/CustomComponents/FormInput.tsx b/forms-flow-components/src/components/CustomComponents/FormInput.tsx index 7aa6c09cd..b168e9fcf 100644 --- a/forms-flow-components/src/components/CustomComponents/FormInput.tsx +++ b/forms-flow-components/src/components/CustomComponents/FormInput.tsx @@ -87,12 +87,12 @@ export const FormInput: React.FC = ({ {icon} )} - {isInvalid && ( + + {isInvalid && ( {feedback} )} - ); }; diff --git a/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx b/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx index 881c5fc3d..7a52061ff 100644 --- a/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx +++ b/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx @@ -26,6 +26,7 @@ interface InputDropdownProps { setNewInput? : (value: string) => void; isInvalid?: boolean; inputClassName?: string; + onBlurDropDown?: () => void; } export const InputDropdown: React.FC = ({ @@ -43,7 +44,8 @@ export const InputDropdown: React.FC = ({ dataTestIdforDropdown, dataTestIdforInput, isInvalid, - inputClassName='' + inputClassName='', + onBlurDropDown }) => { const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [inputValue, setInputValue] = useState(selectedOption || ''); @@ -78,7 +80,10 @@ export const InputDropdown: React.FC = ({ const handleInputDropdownChange = (e: React.ChangeEvent) => { const value = e.target.value; setInputValue(value); - + if (value === '') { + setNewInput(''); + } + //filtering out items const filtered = Options.filter((item) => item.label.toLowerCase().includes(value.toLowerCase()) ); @@ -138,6 +143,9 @@ export const InputDropdown: React.FC = ({ onIconClick={toggleDropdown} label={dropdownLabel} required={required} + onBlur={onBlurDropDown} + isInvalid={!(isDropdownOpen || selectedOption) && isInvalid} + feedback={feedback} /> )} diff --git a/forms-flow-components/src/components/CustomComponents/TableFooter.tsx b/forms-flow-components/src/components/CustomComponents/TableFooter.tsx index 28d55b4ee..05848a6a6 100644 --- a/forms-flow-components/src/components/CustomComponents/TableFooter.tsx +++ b/forms-flow-components/src/components/CustomComponents/TableFooter.tsx @@ -56,7 +56,7 @@ export const TableFooter: React.FC = ({ {pageOptions && ( -
+
{t("Rows per page")}
diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss index 6a40c1d57..d97d127c6 100644 --- a/forms-flow-theme/scss/_forms.scss +++ b/forms-flow-theme/scss/_forms.scss @@ -326,6 +326,7 @@ select option:hover { } .custom-feedback { + display: flex; color: var(--ff-red-000); font-size: var(--font-size-xs); font-weight: var(--font-weight-sm); diff --git a/forms-flow-theme/scss/_table.scss b/forms-flow-theme/scss/_table.scss index 3ed4c5d18..a7748fcf5 100644 --- a/forms-flow-theme/scss/_table.scss +++ b/forms-flow-theme/scss/_table.scss @@ -113,7 +113,6 @@ $status-radius: 50%; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; - height: 3rem; line-height: 1.5rem; color: var(--ff-black); font-weight: var(--font-weight-sm);