{"version":3,"file":"Dropdown-DDADPd8G-chunk.js","sources":["../../../src/components/utility/images/ImageArrowUp.jsx","../../../src/utils/objects.js","../../../src/components/utility/dropdown/Dropdown.jsx"],"sourcesContent":["import React from \"react\";\n\nconst ImageArrowUp = ({ className = \"\" }) => {\n\treturn (\n\t\t\n\t);\n};\n\nexport default ImageArrowUp;\n","export const areObjectsEqual = function (a, b) {\n\tif (typeof a === \"undefined\" || typeof b === \"undefined\") {\n\t\treturn true;\n\t} else if (a === null && b === null) {\n\t\treturn true;\n\t} else if (a === null || b === null) {\n\t\treturn false;\n\t} else if (typeof a !== typeof b) {\n\t\treturn false;\n\t}\n\n\tconst aProps = Object.getOwnPropertyNames(a);\n\tconst bProps = Object.getOwnPropertyNames(b);\n\n\tif (aProps.length !== bProps.length) {\n\t\treturn false;\n\t}\n\n\tfor (let i = 0; i < aProps.length; i++) {\n\t\tconst propName = aProps[i];\n\t\tif (a[propName] !== b[propName]) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\treturn true;\n};\n","import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport ImageArrow from \"components/utility/images/ImageArrow\";\nimport ImageArrowUp from \"components/utility/images/ImageArrowUp\";\nimport { Scrollbars } from \"react-custom-scrollbars-2\";\nimport { sanitizeHtml } from \"utils/sanitizeHtml\";\nimport { areObjectsEqual } from \"utils/objects\";\nimport { isDescendant } from \"utils/dom\";\n\nclass Dropdown extends Component {\n\tstatic defaultProps = {\n\t\titemHeight: 45,\n\t\tmobileAutoHeightMax: \"calc(100vh - 13.75rem)\",\n\t\tautoHeightMax: \"12.65rem\",\n\t\tembedded: false,\n\t\tinitDropped: false,\n\t\tmaxLength: 40,\n\t\tmaxLengthMobile: 20,\n\t\tonOpen: () => {},\n\t\tonClose: () => {}\n\t};\n\n\tstatic propTypes = {\n\t\titemHeight: PropTypes.number,\n\t\tmobileAutoHeightMax: PropTypes.string,\n\t\tautoHeightMax: PropTypes.string,\n\t\tname: PropTypes.string,\n\t\tlabel: PropTypes.string,\n\t\titems: PropTypes.arrayOf(PropTypes.object).isRequired,\n\t\tcurrentItem: PropTypes.object,\n\t\tclassName: PropTypes.string,\n\t\tshowFilter: PropTypes.bool,\n\t\tscrollbarStyle: PropTypes.object,\n\t\tinitDropped: PropTypes.bool,\n\t\tonOpen: PropTypes.func,\n\t\tonKeyArrows: PropTypes.func,\n\t\tonClose: PropTypes.func,\n\t\tsmallMatchesMobileView: PropTypes.bool, // For use when mobile & tablet experience should be the same\n\t\tdataQASelect: PropTypes.string,\n\t\tdataQADropdownList: PropTypes.string\n\t};\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.dropdown = React.createRef();\n\t\tthis.placeholder = React.createRef();\n\t\tthis.list = React.createRef();\n\t\tthis.scrollbar = React.createRef();\n\t\tthis.focusEvent = false;\n\t\tthis.filterTextTimeout = null;\n\n\t\tlet currentIndex = null;\n\t\tif (props.currentItem && props.items && props.items.length) {\n\t\t\tprops.items.forEach((item, key) => {\n\t\t\t\tif (item.key === props.currentItem.key) {\n\t\t\t\t\tcurrentIndex = key;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\n\t\tthis.state = {\n\t\t\tisMobile: false,\n\t\t\tdropped: props.initDropped,\n\t\t\tcurrentItem: props.currentItem ? props.currentItem : null,\n\t\t\titems: props.items ? props.items : null,\n\t\t\tfilterText: \"\",\n\t\t\tcurrentIndex: currentIndex,\n\t\t\tisTouchDevice: false,\n\t\t\topenedByFocus: false,\n\t\t\taccessibilitySelect: null,\n\t\t\thoverCurrentItem: props.currentItem ? props.currentItem : null,\n\t\t\tisHover: false\n\t\t};\n\t}\n\n\tcomponentDidMount() {\n\t\tif (!this.props.label && !this.state.currentItem) {\n\t\t\tthis.onSelected(this.state.items[0]);\n\t\t}\n\t\tdocument.addEventListener(\"mousedown\", this.handleClickOutside);\n\t\tdocument.addEventListener(\"touchstart\", this.onTouchStart);\n\t\twindow.addEventListener(\"resize\", this.onResize);\n\t\tthis.onResize();\n\t}\n\n\t/**\n\t *\n\t * @param {*} event\n\t * on mobile, the country select gets removed from the modal and appended to the body tag\n\t * causing this function to run instead of the onClick of the country button that was selected\n\t * checking the event target classes forces the onClick of the country button to run\n\t */\n\thandleClickOutside = (event) => {\n\t\tconst mobileDropdownClasses = [\n\t\t\t\"dfa-dropdown-item\",\n\t\t\t\"dfa-dropdown-item-content\",\n\t\t\t\"dfa-dropdown-item-content-caption\"\n\t\t];\n\t\tconst elClicked = event.target.classList;\n\t\tif (this.state.dropped) {\n\t\t\tif (\n\t\t\t\tthis.state.isMobile &&\n\t\t\t\tmobileDropdownClasses.some((elClass) => elClicked.contains(elClass))\n\t\t\t) {\n\t\t\t\tlet itemCaption = \"\";\n\t\t\t\tif (event.target.classList.contains(\"dfa-dropdown-item\")) {\n\t\t\t\t\titemCaption = event.target.getAttribute(\"aria-label\");\n\t\t\t\t}\n\t\t\t\tif (event.target.classList.contains(\"dfa-dropdown-item-content\")) {\n\t\t\t\t\titemCaption = event.target.parentNode.getAttribute(\"aria-label\");\n\t\t\t\t}\n\t\t\t\tif (event.target.classList.contains(\"dfa-dropdown-item-content-caption\")) {\n\t\t\t\t\titemCaption = event.target.parentNode.parentNode.getAttribute(\"aria-label\");\n\t\t\t\t}\n\t\t\t\tthis.onSelected(...this.state.items.filter((item) => item.caption === itemCaption));\n\t\t\t} else if (this.state.isMobile && !isDescendant(this.list.current, event.target)) {\n\t\t\t\tthis.handleDropdown();\n\t\t\t} else if (!this.state.isMobile && !isDescendant(this.dropdown.current, event.target)) {\n\t\t\t\tthis.handleDropdown();\n\t\t\t}\n\t\t}\n\t\tif (\n\t\t\t!this.state.dropped &&\n\t\t\tthis.state.isMobile &&\n\t\t\tevent.target.classList.contains(\"ReactModal__Overlay\")\n\t\t) {\n\t\t\tthis.props.onClose(null, this.state.isMobile);\n\t\t}\n\t};\n\n\tonTouchStart = () => {\n\t\tif (!this.state.isTouchDevice) {\n\t\t\tthis.setState({ isTouchDevice: true });\n\t\t}\n\t};\n\n\tcomponentDidUpdate(prevProps, prevState) {\n\t\tconst newState = JSON.parse(JSON.stringify(this.state));\n\t\tlet setState = false;\n\t\tif (prevState.dropped && !this.state.dropped) {\n\t\t\tnewState.filterText = \"\";\n\t\t\tsetState = true;\n\t\t} else if (\n\t\t\tprevProps.items !== this.props.items ||\n\t\t\t(prevProps.items && this.props.items && prevProps.items.length !== this.props.items.length)\n\t\t) {\n\t\t\tnewState.filterText = \"\";\n\t\t\tsetState = true;\n\t\t}\n\n\t\tif (\n\t\t\t!prevState.dropped &&\n\t\t\tthis.state.dropped &&\n\t\t\tprevState.currentIndex >= 0 &&\n\t\t\tthis.state.currentIndex === null\n\t\t) {\n\t\t\tconst { scrollbar } = this.refs;\n\t\t\tscrollbar.scrollTop(0);\n\t\t}\n\n\t\tif (\n\t\t\t!areObjectsEqual(prevProps.currentItem, this.props.currentItem) &&\n\t\t\tthis.state.items &&\n\t\t\tthis.state.items.length\n\t\t) {\n\t\t\tlet currentItem = null,\n\t\t\t\tcurrentIndex = null;\n\t\t\tthis.state.items.forEach((item, key) => {\n\t\t\t\tif (this.props.currentItem && item.key === this.props.currentItem.key) {\n\t\t\t\t\tcurrentItem = this.props.currentItem;\n\t\t\t\t\tcurrentIndex = key;\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tnewState.currentItem = currentItem;\n\t\t\tnewState.currentIndex = currentIndex;\n\t\t\tsetState = true;\n\t\t}\n\n\t\tif (this.state.filterText.length - prevState.filterText.length > 2 && newState.items.length) {\n\t\t\tnewState.currentItem = JSON.parse(JSON.stringify(newState.items[0]));\n\t\t\tnewState.filterText = \"\";\n\t\t\tnewState.dropped = false;\n\t\t\tsetState = true;\n\t\t\tthis.props.onSelected(newState.currentItem);\n\t\t}\n\n\t\tif (setState) {\n\t\t\tthis.setState(newState);\n\t\t}\n\t}\n\n\tshouldComponentUpdate(nextProps, nextState) {\n\t\tif (\n\t\t\tnextProps.topLabel !== this.props.topLabel ||\n\t\t\tnextState.dropped !== this.state.dropped ||\n\t\t\tnextProps.error !== this.props.error ||\n\t\t\tnextState.filterText !== this.state.filterText ||\n\t\t\t!areObjectsEqual(nextProps.currentItem, this.props.currentItem) ||\n\t\t\t!areObjectsEqual(nextState.currentItem, this.state.currentItem) ||\n\t\t\tnextProps.items !== this.props.items ||\n\t\t\t(nextProps.items && this.props.items && nextProps.items.length !== this.props.items.length) ||\n\t\t\tnextState.currentIndex !== this.state.currentIndex\n\t\t) {\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t}\n\n\tstatic getDerivedStateFromProps(props, state) {\n\t\tif (\n\t\t\tprops.items &&\n\t\t\tprops.items.length &&\n\t\t\tstate.items &&\n\t\t\tstate.items.length &&\n\t\t\tprops.items[0].key !== state.items[0].key\n\t\t) {\n\t\t\treturn {\n\t\t\t\titems: props.items,\n\t\t\t\tcurrentItem: null,\n\t\t\t\tcurrentIndex: null\n\t\t\t};\n\t\t}\n\t\treturn null;\n\t}\n\n\tcomponentWillUnmount() {\n\t\twindow.removeEventListener(\"resize\", this.onResize);\n\t\tdocument.removeEventListener(\"mousedown\", this.handleClickOutside);\n\t\tdocument.removeEventListener(\"touchstart\", this.onTouchStart);\n\t\tdocument.removeEventListener(\"keydown\", this.onItemKeyDown);\n\t}\n\n\tonResize = () => {\n\t\tconst { embedded, initDropped, smallMatchesMobileView } = this.props;\n\t\tconst mobileViewBreakpoint = smallMatchesMobileView ? 1023 : 767;\n\t\tconst isMobile = window.innerWidth <= mobileViewBreakpoint;\n\t\tconst dropdownLists = document.querySelectorAll(\".dfa-dropdown\");\n\n\t\tdropdownLists.forEach((dropdown) => {\n\t\t\tdropdown.popover = isMobile ? \"manual\" : null;\n\t\t\tif (dropdown.popover) {\n\t\t\t\tdropdown.togglePopover(false);\n\t\t\t}\n\t\t});\n\t\tif (embedded) {\n\t\t\tthis.setState({\n\t\t\t\tisMobile,\n\t\t\t\tdropped: isMobile && initDropped\n\t\t\t});\n\t\t} else {\n\t\t\tthis.setState({ dropped: false });\n\t\t\tif (isMobile && this.list.current) {\n\t\t\t\tthis.setState({ isMobile: true });\n\t\t\t} else {\n\t\t\t\tif (this.placeholder && this.placeholder.current) {\n\t\t\t\t\tthis.placeholder.current.insertBefore(this.list.current, null);\n\n\t\t\t\t\tthis.setState({ isMobile: false });\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\thandleDropdown = (byFocus, item = null) => {\n\t\tconst { dropped, droppedByFocus } = this.state;\n\t\tconst { name, onOpen, onClose } = this.props;\n\t\tconst currentItem = item ? item : this.state.currentItem ? this.state.currentItem : null;\n\t\tconst newState = {};\n\t\tconst focusables = document.querySelectorAll(\n\t\t\t`select:not(#dfa-dropdown-filter-input-${name}), input, button:not(.dfa-dropdown-item), a`\n\t\t);\n\t\tif (dropped) {\n\t\t\tif (\n\t\t\t\t(currentItem && !this.state.currentItem) ||\n\t\t\t\t(currentItem && this.state.currentItem && currentItem.key !== this.state.currentItem.key)\n\t\t\t) {\n\t\t\t\tnewState.currentItem = JSON.parse(JSON.stringify(currentItem));\n\t\t\t}\n\t\t\tonClose(currentItem);\n\t\t\tif (droppedByFocus) {\n\t\t\t\tnewState.droppedByFocus = false;\n\t\t\t}\n\t\t\tdocument.removeEventListener(\"keydown\", this.onItemKeyDown);\n\t\t\tfocusables.forEach((focusable) => {\n\t\t\t\tfocusable.removeEventListener(\"focus\", this.focusOnOther);\n\t\t\t});\n\t\t\tthis.clearFilterTextTimeout();\n\t\t} else {\n\t\t\tconst anyOtherDropdown = document.querySelectorAll(\n\t\t\t\t`.dfa-dropdown-container:not(#dfa-dropdown-${this.props.name})`\n\t\t\t);\n\t\t\tanyOtherDropdown.forEach((otherDropdown) => {\n\t\t\t\totherDropdown.addEventListener(\"click\", this.handleClickOutside);\n\t\t\t});\n\t\t\tonOpen();\n\t\t\tif (byFocus) {\n\t\t\t\tnewState.droppedByFocus = true;\n\t\t\t}\n\t\t\tdocument.addEventListener(\"keydown\", this.onItemKeyDown);\n\t\t\tfocusables.forEach((focusable) => {\n\t\t\t\tfocusable.addEventListener(\"focus\", this.focusOnOther);\n\t\t\t});\n\t\t\tif (this.state.isMobile) {\n\t\t\t\tthis.list.current.showPopover();\n\t\t\t}\n\t\t}\n\t\tnewState.dropped = !dropped;\n\t\tthis.setState(newState);\n\t};\n\n\tfocusOnOther = () => {\n\t\tif (this.state.dropped) {\n\t\t\tthis.handleDropdown();\n\t\t}\n\t};\n\n\tonSelected = (item) => {\n\t\tif (this.state.currentItem && this.state.currentItem.key === item.key) {\n\t\t\tthis.handleDropdown();\n\t\t} else {\n\t\t\tthis.handleDropdown(false, item);\n\t\t}\n\t};\n\n\tonFilterChange = (filterText) => {\n\t\tlet newState = { filterText: filterText };\n\t\tlet found = null,\n\t\t\tindex = null,\n\t\t\tscrollTop = 0;\n\t\tconst { scrollbar } = this.refs;\n\t\tconst list = this.list.current;\n\t\tconst regex = new RegExp(`^${filterText}`, \"i\");\n\t\tconst domItems = list.querySelectorAll(\".dfa-dropdown-item\");\n\n\t\tif (filterText) {\n\t\t\tfound = this.props.items.find((item, key) => {\n\t\t\t\tindex = key;\n\t\t\t\treturn (item.caption && regex.test(item.caption)) || (item.extra && regex.test(item.extra));\n\t\t\t});\n\n\t\t\tif (found && index !== null) {\n\t\t\t\tfor (let i = 1; i < domItems.length; i++) {\n\t\t\t\t\tif (i <= index) {\n\t\t\t\t\t\tscrollTop += domItems[i].offsetHeight;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tscrollbar.scrollTop(scrollTop);\n\t\t\t\tnewState.currentItem = found;\n\t\t\t\tnewState.currentIndex = index;\n\t\t\t}\n\t\t}\n\n\t\tthis.setState(newState);\n\t};\n\n\tonAccessibilitySelectChange = (e) => {\n\t\tconst { items } = this.state;\n\t\tconst key = e.target.value;\n\t\tlet currentItem = null,\n\t\t\tcurrentIndex = null;\n\t\tif (key && key !== this.state.accessibilitySelect) {\n\t\t\tcurrentItem = items.filter((item, index) => {\n\t\t\t\tif (item.key === key) {\n\t\t\t\t\tcurrentIndex = index;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t});\n\t\t\tif (currentItem.length) {\n\t\t\t\tcurrentItem = JSON.parse(JSON.stringify(currentItem[0]));\n\t\t\t\tif (typeof this.props.onClose === \"function\") {\n\t\t\t\t\tthis.props.onClose(currentItem);\n\t\t\t\t}\n\t\t\t\tthis.setState({\n\t\t\t\t\tcurrentItem: currentItem,\n\t\t\t\t\tdroppedByFocus: false,\n\t\t\t\t\tcurrentIndex: currentIndex,\n\t\t\t\t\tdropped: false,\n\t\t\t\t\taccessibilitySelect: key\n\t\t\t\t});\n\t\t\t\tthis.clearFilterTextTimeout();\n\t\t\t} else {\n\t\t\t\tif (typeof this.props.onClose === \"function\") {\n\t\t\t\t\tthis.props.onClose(null);\n\t\t\t\t}\n\t\t\t\tthis.setState({\n\t\t\t\t\tcurrentItem: null,\n\t\t\t\t\tdroppedByFocus: false,\n\t\t\t\t\tcurrentIndex: null,\n\t\t\t\t\tdropped: false,\n\t\t\t\t\taccessibilitySelect: null\n\t\t\t\t});\n\t\t\t\tthis.clearFilterTextTimeout();\n\t\t\t}\n\t\t}\n\t};\n\n\thandleLabelFocus = () => {\n\t\tif (!this.state.dropped && !this.droppedByFocus) {\n\t\t\tthis.handleDropdown();\n\t\t}\n\t};\n\n\thandleLabelMousedown = (e) => {\n\t\te.nativeEvent.stopImmediatePropagation();\n\t\tthis.handleDropdown();\n\t\tthis.setState({\n\t\t\thoverCurrentItem: this.state.currentItem,\n\t\t\tisHover: false\n\t\t});\n\t};\n\n\tstopPropagation = (e) => {\n\t\te.stopPropagation();\n\t\tif (e.stopImmediatePropagation) {\n\t\t\te.stopImmediatePropagation();\n\t\t} else if (e.nativeEvent.stopImmediatePropagation) {\n\t\t\te.nativeEvent.stopImmediatePropagation();\n\t\t}\n\t};\n\n\tonItemKeyDown = (event) => {\n\t\tconst { scrollbar } = this.refs;\n\t\tconst { name } = this.props;\n\t\tconst { isMobile, isTouchDevice, dropped, currentItem, currentIndex, filterText, items } =\n\t\t\tthis.state;\n\t\tconst list = this.list.current,\n\t\t\tregexp = new RegExp(\"^(key)?[a-z]{1}$\", \"i\");\n\t\tlet code = event.code ? event.code.toLowerCase() : event.key ? event.key.toLowerCase() : \"\";\n\t\tif (list && !isMobile && !isTouchDevice) {\n\t\t\tconst domItems = list.querySelectorAll(\".dfa-dropdown-item\");\n\t\t\tif (dropped && items && items.length) {\n\t\t\t\tif (code === \"arrowup\" || code === \"arrowdown\") {\n\t\t\t\t\tconst focusables = document.querySelectorAll(\n\t\t\t\t\t\t`select:not(#dfa-dropdown-filter-input-${name}), input, button:not(.dfa-dropdown-item), a`\n\t\t\t\t\t);\n\t\t\t\t\tlet nextIndex = 0,\n\t\t\t\t\t\tscrollTop = 0;\n\t\t\t\t\tthis.stopPropagation(event);\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tfocusables.forEach((focusable) => {\n\t\t\t\t\t\tfocusable.addEventListener(\"focus\", this.focusOnOther);\n\t\t\t\t\t});\n\t\t\t\t\tif (currentItem === null || currentIndex === null) {\n\t\t\t\t\t\tscrollbar.scrollTop(0);\n\t\t\t\t\t\tthis.setState({ currentItem: items[0], currentIndex: 0 });\n\t\t\t\t\t\tif (typeof this.props.onKeyArrows === \"function\") {\n\t\t\t\t\t\t\tthis.props.onKeyArrows(items[0]);\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (code === \"arrowup\") {\n\t\t\t\t\t\t\tif (currentIndex > 0) {\n\t\t\t\t\t\t\t\tnextIndex = currentIndex - 1;\n\t\t\t\t\t\t\t} else if (currentIndex === 0) {\n\t\t\t\t\t\t\t\tnextIndex = items.length - 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else if (code === \"arrowdown\") {\n\t\t\t\t\t\t\tif (items.length > currentIndex + 1) {\n\t\t\t\t\t\t\t\tnextIndex = currentIndex + 1;\n\t\t\t\t\t\t\t} else if (items.length === currentIndex + 1) {\n\t\t\t\t\t\t\t\tnextIndex = 0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tfor (let i = 1; i < domItems.length; i++) {\n\t\t\t\t\t\t\tif (i <= nextIndex) {\n\t\t\t\t\t\t\t\tscrollTop += domItems[i].offsetHeight;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tscrollbar.scrollTop(scrollTop);\n\t\t\t\t\t\tthis.setState({ currentItem: items[nextIndex], currentIndex: nextIndex });\n\t\t\t\t\t\tif (typeof this.props.onKeyArrows === \"function\") {\n\t\t\t\t\t\t\tthis.props.onKeyArrows(items[nextIndex]);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else if (code === \"esc\" || code === \"escape\" || code === \"enter\") {\n\t\t\t\t\tthis.handleDropdown();\n\t\t\t\t} else if (code === \"backspace\") {\n\t\t\t\t\tif (filterText.length > 0) {\n\t\t\t\t\t\tthis.clearFilterTextTimeout();\n\t\t\t\t\t\tthis.filterTextStartTimeout();\n\t\t\t\t\t\tthis.onFilterChange(filterText.substring(0, filterText.length - 1));\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.clearFilterTextTimeout();\n\t\t\t\t\t}\n\t\t\t\t} else if (regexp.test(code)) {\n\t\t\t\t\tthis.clearFilterTextTimeout();\n\t\t\t\t\tthis.filterTextStartTimeout();\n\t\t\t\t\tconst letter = code.replace(\"key\", \"\");\n\t\t\t\t\tthis.onFilterChange(`${filterText}${letter}`);\n\t\t\t\t}\n\t\t\t} else if ([\"arrowup\", \"arrowdown\"].includes(code)) {\n\t\t\t\tthis.stopPropagation(event);\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!dropped) {\n\t\t\t\t\tthis.handleDropdown();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tfilterTextStartTimeout = (time = 1.5) => {\n\t\tthis.filterTextTimeout = setTimeout(() => {\n\t\t\tthis.onFilterChange(\"\");\n\t\t}, time * 1000); // in miliseconds\n\t};\n\n\tclearFilterTextTimeout = () => {\n\t\tif (this.filterTextTimeout) {\n\t\t\tclearTimeout(this.filterTextTimeout);\n\t\t}\n\t};\n\n\tonHoverEnter = (item) => {\n\t\tthis.setState({ hoverCurrentItem: item, isHover: true });\n\t\tthis.forceUpdate();\n\t};\n\n\tonHoverLeave = () => {\n\t\tthis.setState({ hoverCurrentItem: this.state.currentItem, isHover: false });\n\t\tthis.forceUpdate();\n\t};\n\n\trender() {\n\t\tconst { dropped, currentItem, isMobile, items, hoverCurrentItem, isHover } = this.state;\n\t\tconst {\n\t\t\tname,\n\t\t\tlabel,\n\t\t\tclassName,\n\t\t\terror,\n\t\t\tmaxLengthMobile,\n\t\t\tmaxLength,\n\t\t\tmobileAutoHeightMax,\n\t\t\tautoHeightMax,\n\t\t\tscrollbarStyle,\n\t\t\tembedded,\n\t\t\tcontainerClassName,\n\t\t\terrorLabel = \"\",\n\t\t\tdataQASelect = null,\n\t\t\tdataQADropdownList = null\n\t\t} = this.props;\n\n\t\tlet currentCaption = null,\n\t\t\tselect = null;\n\t\tlet { topLabel } = this.props;\n\n\t\tif (currentItem) {\n\t\t\tconst maxLen = isMobile ? maxLengthMobile : maxLength;\n\t\t\tcurrentCaption = sanitizeHtml(currentItem.caption);\n\t\t\tcurrentCaption =\n\t\t\t\tcurrentCaption.length > maxLen\n\t\t\t\t\t? currentCaption.substring(0, maxLen).trimEnd() + \"...\"\n\t\t\t\t\t: currentCaption;\n\t\t}\n\t\tif (topLabel) {\n\t\t\ttopLabel = (\n\t\t\t\t
\n\t\t\t);\n\t\t}\n\t\tconst style = {};\n\t\tif (dropped) {\n\t\t\tstyle.zIndex = 100;\n\t\t}\n\t\tselect = (\n\t\t\t