downshift 8.2.3 → 8.2.4-alpha.0

package/dist/src/hooks/utils.d.ts

@@ -58,9 +58,10 @@ export namespace defaultProps {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-export function useControlledReducer(reducer: Function, props: Object, createInitialState: Function): any[];
+export function useControlledReducer(reducer: Function, props: Object, createInitialState: Function, isStateEqual: Function): any[];
 /**
  * Computes the controlled state using a the previous state, props,
  * two reducers, one from downshift and an optional one from the user.
@@ -69,9 +70,10 @@ export function useControlledReducer(reducer: Function, props: Object, createIni
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-export function useEnhancedReducer(reducer: Function, props: Object, createInitialState: Function): any[];
+export function useEnhancedReducer(reducer: Function, props: Object, createInitialState: Function, isStateEqual: Function): any[];
 export function useLatestRef(val: any): React.MutableRefObject<any>;
 export function capitalizeString(string: any): string;
 export function isAcceptedCharacterKey(key: any): boolean;
@@ -112,6 +114,15 @@ export const useElementIds: (({ id, labelId, menuId, getItemId, toggleButtonId,
  * @returns The changes for the state.
  */
 export function getChangesOnSelection(props: Object, highlightedIndex: number, inputValue?: boolean): any;
+/**
+ * Check if a state is equal for dropdowns, by comparing isOpen, inputValue, highlightedIndex and selected item.
+ * Used by useSelect and useCombobox.
+ *
+ * @param {Object} prevState
+ * @param {Object} newState
+ * @returns {boolean} Wheather the states are deeply equal.
+ */
+export function isDropdownsStateEqual(prevState: Object, newState: Object): boolean;
 export namespace commonDropdownPropTypes {
     export const getA11yStatusMessage: PropTypes.Requireable<(...args: any[]) => any>;
     export const highlightedIndex: PropTypes.Requireable<number>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "8.2.3",
+  "version": "8.2.4-alpha.0",
   "description": "🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.",
   "main": "dist/downshift.cjs.js",
   "react-native": "dist/downshift.native.cjs.js",
@@ -108,6 +108,7 @@
     "eslint-plugin-react": "7.33.2",
     "flow-bin": "^0.216.1",
     "flow-coverage-report": "^0.8.0",
+    "formik": "^2.4.5",
     "get-pkg-repo": "5.0.0",
     "kcd-scripts": "^14.0.0",
     "node-polyfill-webpack-plugin": "^2.0.1",

package/preact/dist/downshift.cjs.js

@@ -1658,9 +1658,10 @@ function useLatestRef(val) {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useEnhancedReducer(reducer, props, createInitialState) {
+function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
   var prevStateRef = React.useRef();
   var actionRef = React.useRef();
   var enhancedReducer = React.useCallback(function (state, action) {
@@ -1683,11 +1684,19 @@ function useEnhancedReducer(reducer, props, createInitialState) {
   }, [propsRef]);
   var action = actionRef.current;
   React.useEffect(function () {
-    if (action && prevStateRef.current && prevStateRef.current !== state) {
+    console.log('effect');
+    var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+    console.log('passed', prevStateRef.current, state);
+    if (shouldCallOnChangeProps) {
       callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
     }
     prevStateRef.current = state;
-  }, [state, props, action]);
+  }, [state, action, isStateEqual]);
+  React.useEffect(function () {
+    if (props) {
+      prevStateRef.current = getState(prevStateRef.current, props);
+    }
+  }, [props]);
   return [state, dispatchWithProps];
 }
 
@@ -1698,10 +1707,11 @@ function useEnhancedReducer(reducer, props, createInitialState) {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer$1(reducer, props, createInitialState) {
-  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+function useControlledReducer$1(reducer, props, createInitialState, isStateEqual) {
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
   return [getState(state, props), dispatch];
@@ -1983,6 +1993,18 @@ function getChangesOnSelection(props, highlightedIndex, inputValue) {
   }));
 }
 
+/**
+ * Check if a state is equal for dropdowns, by comparing isOpen, inputValue, highlightedIndex and selected item.
+ * Used by useSelect and useCombobox.
+ *
+ * @param {Object} prevState
+ * @param {Object} newState
+ * @returns {boolean} Wheather the states are deeply equal.
+ */
+function isDropdownsStateEqual(prevState, newState) {
+  return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
+}
+
 // Shared between all exports.
 var commonPropTypes = {
   environment: PropTypes__default["default"].shape({
@@ -2305,14 +2327,13 @@ function useSelect(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     getA11yStatusMessage = props.getA11yStatusMessage;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2),
+  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
     highlightedIndex = state.highlightedIndex,
     selectedItem = state.selectedItem,
     inputValue = state.inputValue;
-
   // Element efs.
   var toggleButtonRef = React.useRef(null);
   var menuRef = React.useRef(null);
@@ -2790,11 +2811,12 @@ var propTypes$1 = _extends__default["default"]({}, commonDropdownPropTypes, {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer(reducer, props, createInitialState) {
+function useControlledReducer(reducer, props, createInitialState, isStateEqual) {
   var previousSelectedItemRef = React.useRef();
-  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
 
@@ -2968,7 +2990,7 @@ function useCombobox(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     itemToString = props.itemToString;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1),
+  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
@@ -3453,6 +3475,18 @@ function getA11yRemovalMessage(selectionParameters) {
     itemToStringLocal = selectionParameters.itemToString;
   return itemToStringLocal(removedSelectedItem) + " has been removed.";
 }
+
+/**
+ * Check if a state is equal for taglist, by comparing active index and selected items.
+ * Used by useSelect and useCombobox.
+ *
+ * @param {Object} prevState
+ * @param {Object} newState
+ * @returns {boolean} Wheather the states are deeply equal.
+ */
+function isStateEqual(prevState, newState) {
+  return prevState.selectedItems === newState.selectedItems && prevState.activeIndex === newState.activeIndex;
+}
 var propTypes = _extends__default["default"]({}, commonPropTypes, {
   selectedItems: PropTypes__default["default"].array,
   initialSelectedItems: PropTypes__default["default"].array,
@@ -3642,7 +3676,7 @@ function useMultipleSelection(userProps) {
     keyNavigationPrevious = props.keyNavigationPrevious;
 
   // Reducer init.
-  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState),
+  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState, isStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var activeIndex = state.activeIndex,

package/preact/dist/downshift.esm.js

@@ -1645,9 +1645,10 @@ function useLatestRef(val) {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useEnhancedReducer(reducer, props, createInitialState) {
+function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
   var prevStateRef = useRef();
   var actionRef = useRef();
   var enhancedReducer = useCallback(function (state, action) {
@@ -1670,11 +1671,19 @@ function useEnhancedReducer(reducer, props, createInitialState) {
   }, [propsRef]);
   var action = actionRef.current;
   useEffect(function () {
-    if (action && prevStateRef.current && prevStateRef.current !== state) {
+    console.log('effect');
+    var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+    console.log('passed', prevStateRef.current, state);
+    if (shouldCallOnChangeProps) {
       callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
     }
     prevStateRef.current = state;
-  }, [state, props, action]);
+  }, [state, action, isStateEqual]);
+  useEffect(function () {
+    if (props) {
+      prevStateRef.current = getState(prevStateRef.current, props);
+    }
+  }, [props]);
   return [state, dispatchWithProps];
 }
 
@@ -1685,10 +1694,11 @@ function useEnhancedReducer(reducer, props, createInitialState) {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer$1(reducer, props, createInitialState) {
-  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+function useControlledReducer$1(reducer, props, createInitialState, isStateEqual) {
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
   return [getState(state, props), dispatch];
@@ -1970,6 +1980,18 @@ function getChangesOnSelection(props, highlightedIndex, inputValue) {
   }));
 }
 
+/**
+ * Check if a state is equal for dropdowns, by comparing isOpen, inputValue, highlightedIndex and selected item.
+ * Used by useSelect and useCombobox.
+ *
+ * @param {Object} prevState
+ * @param {Object} newState
+ * @returns {boolean} Wheather the states are deeply equal.
+ */
+function isDropdownsStateEqual(prevState, newState) {
+  return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
+}
+
 // Shared between all exports.
 var commonPropTypes = {
   environment: PropTypes.shape({
@@ -2292,14 +2314,13 @@ function useSelect(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     getA11yStatusMessage = props.getA11yStatusMessage;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2),
+  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
     highlightedIndex = state.highlightedIndex,
     selectedItem = state.selectedItem,
     inputValue = state.inputValue;
-
   // Element efs.
   var toggleButtonRef = useRef(null);
   var menuRef = useRef(null);
@@ -2777,11 +2798,12 @@ var propTypes$1 = _extends({}, commonDropdownPropTypes, {
  * @param {Function} reducer Reducer function from downshift.
  * @param {Object} props The hook props, also passed to createInitialState.
  * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer(reducer, props, createInitialState) {
+function useControlledReducer(reducer, props, createInitialState, isStateEqual) {
   var previousSelectedItemRef = useRef();
-  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
 
@@ -2955,7 +2977,7 @@ function useCombobox(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     itemToString = props.itemToString;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1),
+  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
@@ -3440,6 +3462,18 @@ function getA11yRemovalMessage(selectionParameters) {
     itemToStringLocal = selectionParameters.itemToString;
   return itemToStringLocal(removedSelectedItem) + " has been removed.";
 }
+
+/**
+ * Check if a state is equal for taglist, by comparing active index and selected items.
+ * Used by useSelect and useCombobox.
+ *
+ * @param {Object} prevState
+ * @param {Object} newState
+ * @returns {boolean} Wheather the states are deeply equal.
+ */
+function isStateEqual(prevState, newState) {
+  return prevState.selectedItems === newState.selectedItems && prevState.activeIndex === newState.activeIndex;
+}
 var propTypes = _extends({}, commonPropTypes, {
   selectedItems: PropTypes.array,
   initialSelectedItems: PropTypes.array,
@@ -3629,7 +3663,7 @@ function useMultipleSelection(userProps) {
     keyNavigationPrevious = props.keyNavigationPrevious;
 
   // Reducer init.
-  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState),
+  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState, isStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var activeIndex = state.activeIndex,

package/preact/dist/downshift.umd.js

@@ -295,7 +295,7 @@
 
   var reactIsExports = reactIs.exports;
 
-  const t=t=>"object"==typeof t&&null!=t&&1===t.nodeType,e=(t,e)=>(!e||"hidden"!==t)&&("visible"!==t&&"clip"!==t),n=(t,n)=>{if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){const o=getComputedStyle(t,null);return e(o.overflowY,n)||e(o.overflowX,n)||(t=>{const e=(t=>{if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}})(t);return !!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)})(t)}return !1},o=(t,e,n,o,l,r,i,s)=>r<t&&i>e||r>t&&i<e?0:r<=t&&s<=n||i>=e&&s>=n?r-t-o:i>e&&s<n||r<t&&s>n?i-e+l:0,l=t=>{const e=t.parentElement;return null==e?t.getRootNode().host||null:e},r=(e,r)=>{var i,s,d,h;if("undefined"==typeof document)return [];const{scrollMode:c,block:f,inline:u,boundary:a,skipOverflowHiddenElements:g}=r,p="function"==typeof a?a:t=>t!==a;if(!t(e))throw new TypeError("Invalid target");const m=document.scrollingElement||document.documentElement,w=[];let W=e;for(;t(W)&&p(W);){if(W=l(W),W===m){w.push(W);break}null!=W&&W===document.body&&n(W)&&!n(document.documentElement)||null!=W&&n(W,g)&&w.push(W);}const b=null!=(s=null==(i=window.visualViewport)?void 0:i.width)?s:innerWidth,H=null!=(h=null==(d=window.visualViewport)?void 0:d.height)?h:innerHeight,{scrollX:y,scrollY:M}=window,{height:v,width:E,top:x,right:C,bottom:I,left:R}=e.getBoundingClientRect(),{top:T,right:B,bottom:F,left:V}=(t=>{const e=window.getComputedStyle(t);return {top:parseFloat(e.scrollMarginTop)||0,right:parseFloat(e.scrollMarginRight)||0,bottom:parseFloat(e.scrollMarginBottom)||0,left:parseFloat(e.scrollMarginLeft)||0}})(e);let k="start"===f||"nearest"===f?x-T:"end"===f?I+F:x+v/2-T+F,D="center"===u?R+E/2-V+B:"end"===u?C+B:R-V;const L=[];for(let t=0;t<w.length;t++){const e=w[t],{height:n,width:l,top:r,right:i,bottom:s,left:d}=e.getBoundingClientRect();if("if-needed"===c&&x>=0&&R>=0&&I<=H&&C<=b&&x>=r&&I<=s&&R>=d&&C<=i)return L;const h=getComputedStyle(e),a=parseInt(h.borderLeftWidth,10),g=parseInt(h.borderTopWidth,10),p=parseInt(h.borderRightWidth,10),W=parseInt(h.borderBottomWidth,10);let T=0,B=0;const F="offsetWidth"in e?e.offsetWidth-e.clientWidth-a-p:0,V="offsetHeight"in e?e.offsetHeight-e.clientHeight-g-W:0,S="offsetWidth"in e?0===e.offsetWidth?0:l/e.offsetWidth:0,X="offsetHeight"in e?0===e.offsetHeight?0:n/e.offsetHeight:0;if(m===e)T="start"===f?k:"end"===f?k-H:"nearest"===f?o(M,M+H,H,g,W,M+k,M+k+v,v):k-H/2,B="start"===u?D:"center"===u?D-b/2:"end"===u?D-b:o(y,y+b,b,a,p,y+D,y+D+E,E),T=Math.max(0,T+M),B=Math.max(0,B+y);else {T="start"===f?k-r-g:"end"===f?k-s+W+V:"nearest"===f?o(r,s,n,g,W+V,k,k+v,v):k-(r+n/2)+V/2,B="start"===u?D-d-a:"center"===u?D-(d+l/2)+F/2:"end"===u?D-i+p+F:o(d,i,l,a,p+F,D,D+E,E);const{scrollLeft:t,scrollTop:h}=e;T=0===X?0:Math.max(0,Math.min(h+T/X,e.scrollHeight-n/X+V)),B=0===S?0:Math.max(0,Math.min(t+B/S,e.scrollWidth-l/S+F)),k+=h-T,D+=t-B;}L.push({el:e,top:T,left:B});}return L};
+  const t=t=>"object"==typeof t&&null!=t&&1===t.nodeType,e=(t,e)=>(!e||"hidden"!==t)&&("visible"!==t&&"clip"!==t),n=(t,n)=>{if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){const o=getComputedStyle(t,null);return e(o.overflowY,n)||e(o.overflowX,n)||(t=>{const e=(t=>{if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}})(t);return !!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)})(t)}return !1},o=(t,e,n,o,i,l,r,d)=>l<t&&r>e||l>t&&r<e?0:l<=t&&d<=n||r>=e&&d>=n?l-t-o:r>e&&d<n||l<t&&d>n?r-e+i:0,i=t=>{const e=t.parentElement;return null==e?t.getRootNode().host||null:e},l=(e,l)=>{var r,d,s,h;if("undefined"==typeof document)return [];const{scrollMode:c,block:f,inline:u,boundary:a,skipOverflowHiddenElements:g}=l,m="function"==typeof a?a:t=>t!==a;if(!t(e))throw new TypeError("Invalid target");const p=document.scrollingElement||document.documentElement,w=[];let W=e;for(;t(W)&&m(W);){if(W=i(W),W===p){w.push(W);break}null!=W&&W===document.body&&n(W)&&!n(document.documentElement)||null!=W&&n(W,g)&&w.push(W);}const H=null!=(d=null==(r=window.visualViewport)?void 0:r.width)?d:innerWidth,b=null!=(h=null==(s=window.visualViewport)?void 0:s.height)?h:innerHeight,{scrollX:v,scrollY:y}=window,{height:E,width:M,top:x,right:I,bottom:C,left:R}=e.getBoundingClientRect();let T="start"===f||"nearest"===f?x:"end"===f?C:x+E/2,V="center"===u?R+M/2:"end"===u?I:R;const k=[];for(let t=0;t<w.length;t++){const e=w[t],{height:n,width:i,top:l,right:r,bottom:d,left:s}=e.getBoundingClientRect();if("if-needed"===c&&x>=0&&R>=0&&C<=b&&I<=H&&x>=l&&C<=d&&R>=s&&I<=r)return k;const h=getComputedStyle(e),a=parseInt(h.borderLeftWidth,10),g=parseInt(h.borderTopWidth,10),m=parseInt(h.borderRightWidth,10),W=parseInt(h.borderBottomWidth,10);let B=0,D=0;const L="offsetWidth"in e?e.offsetWidth-e.clientWidth-a-m:0,S="offsetHeight"in e?e.offsetHeight-e.clientHeight-g-W:0,X="offsetWidth"in e?0===e.offsetWidth?0:i/e.offsetWidth:0,Y="offsetHeight"in e?0===e.offsetHeight?0:n/e.offsetHeight:0;if(p===e)B="start"===f?T:"end"===f?T-b:"nearest"===f?o(y,y+b,b,g,W,y+T,y+T+E,E):T-b/2,D="start"===u?V:"center"===u?V-H/2:"end"===u?V-H:o(v,v+H,H,a,m,v+V,v+V+M,M),B=Math.max(0,B+y),D=Math.max(0,D+v);else {B="start"===f?T-l-g:"end"===f?T-d+W+S:"nearest"===f?o(l,d,n,g,W+S,T,T+E,E):T-(l+n/2)+S/2,D="start"===u?V-s-a:"center"===u?V-(s+i/2)+L/2:"end"===u?V-r+m+L:o(s,r,i,a,m+L,V,V+M,M);const{scrollLeft:t,scrollTop:h}=e;B=Math.max(0,Math.min(h+B/Y,e.scrollHeight-n/Y+S)),D=Math.max(0,Math.min(t+D/X,e.scrollWidth-i/X+L)),T+=h-B,V+=t-D;}k.push({el:e,top:B,left:D});}return k};
 
   var idCounter = 0;
 
@@ -321,7 +321,7 @@
     if (!node) {
       return;
     }
-    var actions = r(node, {
+    var actions = l(node, {
       boundary: menuNode,
       block: 'nearest',
       scrollMode: 'if-needed'
@@ -1927,9 +1927,10 @@
    * @param {Function} reducer Reducer function from downshift.
    * @param {Object} props The hook props, also passed to createInitialState.
    * @param {Function} createInitialState Function that returns the initial state.
+   * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
    * @returns {Array} An array with the state and an action dispatcher.
    */
-  function useEnhancedReducer(reducer, props, createInitialState) {
+  function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
     var prevStateRef = React.useRef();
     var actionRef = React.useRef();
     var enhancedReducer = React.useCallback(function (state, action) {
@@ -1952,11 +1953,19 @@
     }, [propsRef]);
     var action = actionRef.current;
     React.useEffect(function () {
-      if (action && prevStateRef.current && prevStateRef.current !== state) {
+      console.log('effect');
+      var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+      console.log('passed', prevStateRef.current, state);
+      if (shouldCallOnChangeProps) {
         callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
       }
       prevStateRef.current = state;
-    }, [state, props, action]);
+    }, [state, action, isStateEqual]);
+    React.useEffect(function () {
+      if (props) {
+        prevStateRef.current = getState(prevStateRef.current, props);
+      }
+    }, [props]);
     return [state, dispatchWithProps];
   }
 
@@ -1967,10 +1976,11 @@
    * @param {Function} reducer Reducer function from downshift.
    * @param {Object} props The hook props, also passed to createInitialState.
    * @param {Function} createInitialState Function that returns the initial state.
+   * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
    * @returns {Array} An array with the state and an action dispatcher.
    */
-  function useControlledReducer$1(reducer, props, createInitialState) {
-    var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+  function useControlledReducer$1(reducer, props, createInitialState, isStateEqual) {
+    var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
       state = _useEnhancedReducer[0],
       dispatch = _useEnhancedReducer[1];
     return [getState(state, props), dispatch];
@@ -2252,6 +2262,18 @@
     }));
   }
 
+  /**
+   * Check if a state is equal for dropdowns, by comparing isOpen, inputValue, highlightedIndex and selected item.
+   * Used by useSelect and useCombobox.
+   *
+   * @param {Object} prevState
+   * @param {Object} newState
+   * @returns {boolean} Wheather the states are deeply equal.
+   */
+  function isDropdownsStateEqual(prevState, newState) {
+    return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
+  }
+
   // Shared between all exports.
   var commonPropTypes = {
     environment: PropTypes__default["default"].shape({
@@ -2605,14 +2627,13 @@
       getA11ySelectionMessage = props.getA11ySelectionMessage,
       getA11yStatusMessage = props.getA11yStatusMessage;
     // Initial state depending on controlled props.
-    var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2),
+    var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2, isDropdownsStateEqual),
       state = _useControlledReducer[0],
       dispatch = _useControlledReducer[1];
     var isOpen = state.isOpen,
       highlightedIndex = state.highlightedIndex,
       selectedItem = state.selectedItem,
       inputValue = state.inputValue;
-
     // Element efs.
     var toggleButtonRef = React.useRef(null);
     var menuRef = React.useRef(null);
@@ -3090,11 +3111,12 @@
    * @param {Function} reducer Reducer function from downshift.
    * @param {Object} props The hook props, also passed to createInitialState.
    * @param {Function} createInitialState Function that returns the initial state.
+   * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
    * @returns {Array} An array with the state and an action dispatcher.
    */
-  function useControlledReducer(reducer, props, createInitialState) {
+  function useControlledReducer(reducer, props, createInitialState, isStateEqual) {
     var previousSelectedItemRef = React.useRef();
-    var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+    var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
       state = _useEnhancedReducer[0],
       dispatch = _useEnhancedReducer[1];
 
@@ -3268,7 +3290,7 @@
       getA11ySelectionMessage = props.getA11ySelectionMessage,
       itemToString = props.itemToString;
     // Initial state depending on controlled props.
-    var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1),
+    var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1, isDropdownsStateEqual),
       state = _useControlledReducer[0],
       dispatch = _useControlledReducer[1];
     var isOpen = state.isOpen,
@@ -3753,6 +3775,18 @@
       itemToStringLocal = selectionParameters.itemToString;
     return itemToStringLocal(removedSelectedItem) + " has been removed.";
   }
+
+  /**
+   * Check if a state is equal for taglist, by comparing active index and selected items.
+   * Used by useSelect and useCombobox.
+   *
+   * @param {Object} prevState
+   * @param {Object} newState
+   * @returns {boolean} Wheather the states are deeply equal.
+   */
+  function isStateEqual(prevState, newState) {
+    return prevState.selectedItems === newState.selectedItems && prevState.activeIndex === newState.activeIndex;
+  }
   var propTypes = _extends({}, commonPropTypes, {
     selectedItems: PropTypes__default["default"].array,
     initialSelectedItems: PropTypes__default["default"].array,
@@ -3942,7 +3976,7 @@
       keyNavigationPrevious = props.keyNavigationPrevious;
 
     // Reducer init.
-    var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState),
+    var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState, isStateEqual),
       state = _useControlledReducer[0],
       dispatch = _useControlledReducer[1];
     var activeIndex = state.activeIndex,