fix: use and mock lodash debounce in Carousel and Dropdown (#2203)

* use lodash debounce and mock it

* changelog

* cleanup

* mock in Carousel tests as well

* cancel the debounced function in carousel

* mock lodash in file

Author: silviuaavram

CHANGELOG.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `toggle` changing width during animation in Teams theme @mnajdova ([#2189](https://github.com/microsoft/fluent-ui-react/pull/2189))
 - Fix `Popup` positioning in multiple cases @layershifter ([#2187](https://github.com/microsoft/fluent-ui-react/pull/2187))
 - Fix click outside in `Popup` when `trigger` is not defined @layershifter ([#2202](https://github.com/microsoft/fluent-ui-react/pull/2202))
+- Use `debounce` from `lodash` in `Dropdown` and `Carouel` @silviuavram ([#2203](https://github.com/microsoft/fluent-ui-react/pull/2203))
 
 <!--------------------------------[ v0.42.0 ]------------------------------- -->
 ## [v0.42.0](https://github.com/microsoft/fluent-ui-react/tree/v0.42.0) (2019-12-12)

packages/react/src/components/Carousel/Carousel.tsx

@@ -15,7 +15,6 @@ import {
   ChildrenComponentProps,
   getOrGenerateIdFromShorthand,
   AutoControlledComponent,
-  debounce,
 } from '../../utils'
 import {
   WithAsProp,
@@ -171,6 +170,10 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
     }
   }
 
+  componentWillUnmount() {
+    this.focusItemAtIndex.cancel()
+  }
+
   actionHandlers = {
     showNextSlideByKeyboardNavigation: e => {
       e.preventDefault()
@@ -213,8 +216,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
   itemRefs = [] as React.RefObject<HTMLElement>[]
   paddleNextRef = React.createRef<HTMLElement>()
   paddlePreviousRef = React.createRef<HTMLElement>()
-
-  focusItemAtIndex = debounce((index: number) => {
+  focusItemAtIndex = _.debounce((index: number) => {
     this.itemRefs[index].current.focus()
   }, 400)
 

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -344,6 +344,11 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
   static SearchInput = DropdownSearchInput
   static SelectedItem = DropdownSelectedItem
 
+  componentWillUnmount() {
+    this.clearStartingString.cancel()
+    this.clearA11ySelectionMessage.cancel()
+  }
+
   getInitialAutoControlledState({ multiple, search }: DropdownProps): DropdownState {
     return {
       a11ySelectionStatus: '',
@@ -361,15 +366,8 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
     }
   }
 
-  a11yStatusTimeout: any
-  charKeysPressedTimeout: any
   defaultTriggerButtonId = _.uniqueId('dropdown-trigger-button-')
 
-  componentWillUnmount() {
-    clearTimeout(this.a11yStatusTimeout)
-    clearTimeout(this.charKeysPressedTimeout)
-  }
-
   /**
    * Used to compute the filtered items (by value and search query) and, if needed,
    * their string equivalents, in order to be used throughout the component.
@@ -1348,20 +1346,22 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
    * so it is not read anymore via virtual cursor.
    */
   setA11ySelectionMessage = (a11ySelectionStatus: string): void => {
-    clearTimeout(this.a11yStatusTimeout)
     this.setState({ a11ySelectionStatus })
-    this.a11yStatusTimeout = setTimeout(() => {
-      this.setState({ a11ySelectionStatus: '' })
-    }, Dropdown.a11yStatusCleanupTime)
+    this.clearA11ySelectionMessage()
   }
 
   setStartingString = (startingString: string): void => {
-    clearTimeout(this.charKeysPressedTimeout)
     this.setState({ startingString })
-    this.charKeysPressedTimeout = setTimeout(() => {
-      this.setState({ startingString: '' })
-    }, Dropdown.charKeyPressedCleanupTime)
+    this.clearStartingString()
   }
+
+  clearA11ySelectionMessage = _.debounce(() => {
+    this.setState({ a11ySelectionStatus: '' })
+  }, Dropdown.a11yStatusCleanupTime)
+
+  clearStartingString = _.debounce(() => {
+    this.setState({ startingString: '' })
+  }, Dropdown.charKeyPressedCleanupTime)
 }
 
 Dropdown.slotClassNames = {

packages/react/src/utils/index.ts

@@ -49,4 +49,3 @@ export module commonPropTypes {
 
 export { default as withDebugId } from './withDebugId'
 export { default as Telemetry } from './Telemetry'
-export { default as debounce } from './debounce'

packages/react/src/utils/debounce.ts renamed to packages/react/test/__mocks__/lodash.ts

@@ -1,23 +1,19 @@
-const debounce = (fn: Function, time: number): Function => {
+// @ts-ignore
+export * from 'lodash'
+export const debounce = (fn: Function, time: number): Function => {
   let timeoutId
-
   function cancel() {
     if (timeoutId) {
       clearTimeout(timeoutId)
     }
   }
-
   function wrapper(...args) {
     cancel()
     timeoutId = setTimeout(() => {
       timeoutId = null
       fn(...args)
     }, time)
   }
-
   wrapper.cancel = cancel
-
   return wrapper
 }
-
-export default debounce

packages/react/test/specs/components/Dropdown/Dropdown-test.tsx

@@ -13,6 +13,7 @@ import { ShorthandValue } from 'src/types'
 
 jest.dontMock('keyboard-key')
 jest.useFakeTimers()
+// jest.mock('lodash')
 
 const getTriggerButtonWrapper = (wrapper: ReactWrapper): CommonWrapper =>
   findIntrinsicElement(wrapper, `.${Dropdown.slotClassNames.triggerButton}`)