@dvrd/dvr-controls 1.0.73 → 1.0.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.73",
+  "version": "1.0.75",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

package/src/js/select/dvrdMultiSelect.tsx

@@ -3,7 +3,7 @@
  */
 import './style/dvrdSelect.scss';
 
-import React, {MouseEventHandler, ReactElement, useEffect, useMemo, useRef, useState} from 'react';
+import React, {ReactElement, useEffect, useMemo, useRef, useState} from 'react';
 import classNames from 'classnames';
 import {ChangeFunction, ErrorType, SelectItemShape} from '../util/interfaces';
 import {hasHover, stopPropagation} from '../util/controlUtil';
@@ -11,7 +11,7 @@ import AwesomeIcon from '../icon/awesomeIcon';
 import delay from 'lodash.delay';
 
 interface Props {
-    onChange: (selected: Array<string | number>, submit: boolean) => MouseEventHandler;
+    onChange: (selected: Array<string | number>, submit: boolean) => VoidFunction;
     onChangeSearch: ChangeFunction;
     selected: Array<string | number>;
     items: SelectItemShape[];
@@ -72,8 +72,8 @@ export default function DvrdMultiSelect(props: Props) {
         return function (evt: React.MouseEvent) {
             stopPropagation(evt);
             if (selected.includes(_value))
-                onChange(selected.filter((value: string | number) => value !== _value), !submitOnClose)(evt);
-            else onChange(selected.concat(_value), !submitOnClose)(evt);
+                onChange(selected.filter((value: string | number) => value !== _value), !submitOnClose)();
+            else onChange(selected.concat(_value), !submitOnClose)();
         }
     }
 
@@ -200,7 +200,7 @@ export default function DvrdMultiSelect(props: Props) {
         if (open) addClickListener();
         else {
             removeClickListener();
-            if (submitOnClose && !isFirstRender) onChange(selected, true);
+            if (submitOnClose && !isFirstRender) onChange(selected, true)();
         }
         return function () {
             removeClickListener();

package/src/js/select/dvrdSelectController.tsx

@@ -45,8 +45,6 @@ export default function DvrdSelectController(props: Props) {
         if (!search) return items;
         return items.filter((item) => stringContains(item.label.toString(), search));
     }, [items, search]);
-    const _value = useMemo(() => unControlled ? internalValue : value,
-        [unControlled, internalValue, value]);
 
     function _onChange(value: ValueType, submit: boolean = true) {
         return function () {
@@ -62,15 +60,18 @@ export default function DvrdSelectController(props: Props) {
     useEffect(() => {
         if (multi && !Array.isArray(value)) throw new TypeError('Value must be an array in multi mode');
         else if (!multi && Array.isArray(value)) throw new TypeError('Value must be a string or number in single mode');
+    }, [value, multi]);
+
+    useEffect(() => {
         if (!unControlled && value !== internalValue) setInternalValue(value);
-    }, [value, multi, unControlled]);
+    }, [value, unControlled]);
 
     const itemsPosition = props.itemsPosition ?? 'bottom';
     const optionsContainerHeight = props.optionsContainerHeight ?? '15rem';
     const selectOnly = props.selectOnly !== false;
     if (multi) return (
         <DvrdMultiSelect onChange={_onChange} onChangeSearch={onChangeSearch}
-                         selected={_value as Array<string | number>} items={_items} itemsPosition={itemsPosition}
+                         selected={internalValue as Array<string | number>} items={_items} itemsPosition={itemsPosition}
                          selectOnly={selectOnly} searchValue={search} optionsContainerHeight={optionsContainerHeight}
                          className={className} error={error} label={label} arrowClassName={arrowClassName}
                          errorClassName={errorClassName} itemClassName={itemClassName} submitOnClose={submitOnClose}
@@ -78,7 +79,7 @@ export default function DvrdSelectController(props: Props) {
                          labelClassName={labelClassName} disabled={disabled} placeholder={placeholder}/>
     );
     return (
-        <DvrdSelect onChange={_onChange} onChangeSearch={onChangeSearch} value={_value as number | string}
+        <DvrdSelect onChange={_onChange} onChangeSearch={onChangeSearch} value={internalValue as number | string}
                     items={_items} itemsPosition={itemsPosition} selectOnly={selectOnly} searchValue={search}
                     optionsContainerHeight={optionsContainerHeight} className={className} error={error} label={label}
                     arrowClassName={arrowClassName} errorClassName={errorClassName} itemClassName={itemClassName}