Merge branch 'fix/QueryItem.valueSelector.Cascader-various-fixes' int…

…o chore/QueryItem.valueSelector-adding-extra-functionality

CHANGELOG.md

@@ -1,3 +1,30 @@
+## [1.21.1-fix-queryitem.valueselector.cascader-various-fixes.1](https://github.com/mParticle/aquarium/compare/v1.21.0...v1.21.1-fix-queryitem.valueselector.cascader-various-fixes.1) (2024-07-19)
+
+### Bug Fixes
+
+- a useEffect Hook has been added to detect if the value received from parameter changed ([d8c6f10](https://github.com/mParticle/aquarium/commit/d8c6f10b7ed3df7e742b0fb23a0657bf0102e843))
+- extra validation added to cascader selectedDisplayValue state ([ed3e159](https://github.com/mParticle/aquarium/commit/ed3e15910a1485b4426b49b13a72c8e4fe1dbda3))
+
+## [1.21.1-fix-queryitem.valueselector.cascader-intial-value-validation.1](https://github.com/mParticle/aquarium/compare/v1.21.0...v1.21.1-fix-queryitem.valueselector.cascader-intial-value-validation.1) (2024-07-19)
+
+### Bug Fixes
+
+- a useEffect Hook has been added to detect if the value received from parameter changed ([d8c6f10](https://github.com/mParticle/aquarium/commit/d8c6f10b7ed3df7e742b0fb23a0657bf0102e843))
+- extra validation added to cascader selectedDisplayValue state ([ed3e159](https://github.com/mParticle/aquarium/commit/ed3e15910a1485b4426b49b13a72c8e4fe1dbda3))
+
+## [1.21.1-fix-queryitem.valueselector.cascader-intial-value-validation.1](https://github.com/mParticle/aquarium/compare/v1.21.0...v1.21.1-fix-queryitem.valueselector.cascader-intial-value-validation.1) (2024-07-17)
+
+### Bug Fixes
+
+- a useEffect Hook has been added to detect if the value received from parameter changed ([d8c6f10](https://github.com/mParticle/aquarium/commit/d8c6f10b7ed3df7e742b0fb23a0657bf0102e843))
+- extra validation added to cascader selectedDisplayValue state ([ed3e159](https://github.com/mParticle/aquarium/commit/ed3e15910a1485b4426b49b13a72c8e4fe1dbda3))
+
+## [1.21.1-fix-queryitem.valueselector.cascader-intial-value-validation.1](https://github.com/mParticle/aquarium/compare/v1.21.0...v1.21.1-fix-queryitem.valueselector.cascader-intial-value-validation.1) (2024-07-17)
+
+### Bug Fixes
+
+- extra validation added to cascader selectedDisplayValue state ([ed3e159](https://github.com/mParticle/aquarium/commit/ed3e15910a1485b4426b49b13a72c8e4fe1dbda3))
+
 # [1.21.0](https://github.com/mParticle/aquarium/compare/v1.20.0...v1.21.0) (2024-07-16)
 
 ### Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mparticle/aquarium",
-  "version": "1.21.0",
+  "version": "1.21.1-fix-queryitem.valueselector.cascader-various-fixes.1",
   "description": "mParticle Component Library",
   "license": "Apache-2.0",
   "keywords": [

src/components/data-entry/QueryItem/Cascader.tsx

@@ -28,6 +28,7 @@ export interface ICascaderProps {
   onChange?: (values: Array<number | string>, selectedOptions: any) => Promise<void>
   loadData?: (value: string) => void
   value?: Array<number | string>
+  classNameInput?: string
 }
 
 const Cascader = (props: ICascaderProps) => {
@@ -38,14 +39,20 @@ const Cascader = (props: ICascaderProps) => {
   const [searchValue, setSearchValue] = useState('')
   const [selectedValue, setSelectedValue] = useState<Array<number | string>>(props.value ?? [])
   const [selectedDisplayValue, setSelectedDisplayValue] = useState(
-    props.value ? (props.value.slice(-1)[0] as any).label : '',
+    props.value && props.value.length > 0 ? (props.value.slice(-1)[0] as any).label : '',
   )
   const [isOpen, setIsOpen] = useState(false)
 
   useEffect(() => {
     setItems(props.options)
   }, [props.options])
 
+  useEffect(() => {
+    if (props.value && props.value.length > 0) {
+      setSelectedValue(props.value)
+    }
+  }, [props.value])
+
   const onSearch = ({ target: { value } }: { target: { value: string } }) => {
     if (debouncedLoadData) {
       if (value.length > 3) {
@@ -117,6 +124,8 @@ const Cascader = (props: ICascaderProps) => {
   if (isOpen) inputClasses += ' query-item--open'
   if (selectedValue && selectedValue.length !== 0) inputClasses += ' query-item--selected'
   if (props.errorMessage) inputClasses += ' query-item--error'
+  if (props.classNameInput) inputClasses += ` ${props.classNameInput}`
+
   const displayValue = selectedDisplayValue ?? selectedValue.slice(-1)
 
   return (
@@ -179,4 +188,4 @@ const Cascader = (props: ICascaderProps) => {
   }
 }
 
-export default Cascader
+export default Cascader