Merge pull request #354 from fahad-aot/bugfix/Cahngesto-custom-compon…

…ents Updates to Custom inputdropdown component
AOT-Technologies · Nov 27, 2024 · be088cb · be088cb
2 parents 4000fd8 + 2ef3da1
commit be088cb
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git 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<FormInputProps> = ({
               {icon}
             </InputGroup.Text>
           )}
-          {isInvalid && (
+        </InputGroup>
+        {isInvalid && (
             <Form.Control.Feedback className='custom-feedback' type="invalid">
               {feedback}
             </Form.Control.Feedback>
           )}
-        </InputGroup>
       </Form.Group>
   );
 };

diff --git 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<InputDropdownProps> = ({
@@ -43,7 +44,8 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
   dataTestIdforDropdown,
   dataTestIdforInput,
   isInvalid,
-  inputClassName=''
+  inputClassName='',
+  onBlurDropDown
 }) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState<string>(selectedOption || ''); 
@@ -78,7 +80,10 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
   const handleInputDropdownChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       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<InputDropdownProps> = ({
                       onIconClick={toggleDropdown}
                       label={dropdownLabel}
                       required={required}
+                      onBlur={onBlurDropDown}
+                      isInvalid={!(isDropdownOpen || selectedOption) && isInvalid}
+                      feedback={feedback}
                   />
               </InputGroup>
           )}

diff --git 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<TableFooterProps> = ({
           </td>
           {pageOptions && (
             <td colSpan={3}>           
-             <div className="d-flex align-items-center">              
+             <div className="d-flex align-items-center justify-content-end">              
               <span className="pagination-text">{t("Rows per page")}</span>
               <div className="pagination-dropdown">
                 <Dropdown data-testid="page-limit-dropdown">

diff --git 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
@@ -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);