Add onFocus, onBlur, onMouseEnter and onMouseLeave events to Dropdown

Author: estacioneto

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- **Dropdown** `onFocus`, `onBlur`, `onMouseEnter` and `onMouseLeave` props.
+
 ## [9.145.2] - 2021-10-26
 
 ### Fixed

react/components/Dropdown/README.md

@@ -37,6 +37,10 @@ options = [
       options={options}
       value={state.selected1}
       onChange={(_, v) => setState({ selected1: v })}
+      onFocus={() => console.log('onFocus fired!')}
+      onBlur={() => console.log('onBlur fired!')}
+      onMouseEnter={() => console.log('onMouseEnter fired!')}
+      onMouseLeave={() => console.log('onMouseLeave fired!')}
     />
   </div>
 
@@ -46,6 +50,10 @@ options = [
       options={options}
       value={state.selected2}
       onChange={(_, v) => setState({ selected2: v })}
+      onFocus={() => console.log('onFocus fired!')}
+      onBlur={() => console.log('onBlur fired!')}
+      onMouseEnter={() => console.log('onMouseEnter fired!')}
+      onMouseLeave={() => console.log('onMouseLeave fired!')}
     />
   </div>
 
@@ -56,6 +64,10 @@ options = [
       options={options}
       value={state.selected3}
       onChange={(_, v) => setState({ selected3: v })}
+      onFocus={() => console.log('onFocus fired!')}
+      onBlur={() => console.log('onBlur fired!')}
+      onMouseEnter={() => console.log('onMouseEnter fired!')}
+      onMouseLeave={() => console.log('onMouseLeave fired!')}
     />
   </div>
 </div>

react/components/Dropdown/index.js

@@ -75,10 +75,12 @@ class Dropdown extends Component {
 
   handleFocus = () => {
     this.setState({ active: true })
+    this.props.onFocus && this.props.onFocus(event)
   }
 
   handleBlur = () => {
     this.setState({ active: false })
+    this.props.onBlur && this.props.onBlur(event)
   }
 
   getValueLabel() {
@@ -219,6 +221,8 @@ class Dropdown extends Component {
               onChange={this.handleChange}
               onFocus={this.handleFocus}
               onBlur={this.handleBlur}
+              onMouseEnter={this.props.onMouseEnter}
+              onMouseLeave={this.props.onMouseLeave}
               ref={this.props.forwardedRef}
               // Check the comment on the constructor regarding nil values
               value={value == null ? '' : value}
@@ -324,6 +328,14 @@ Dropdown.propTypes = {
   required: PropTypes.bool,
   /** onChange event */
   onChange: PropTypes.func,
+  /** onFocus event */
+  onFocus: PropTypes.func,
+  /** onBlur event */
+  onBlur: PropTypes.func,
+  /** onMouseEnter event */
+  onMouseEnter: PropTypes.func,
+  /** onMouseLeave event */
+  onMouseLeave: PropTypes.func,
   /** onClose event */
   onClose: PropTypes.func,
   /** onOpen event */

styleguide.config.js

@@ -287,12 +287,12 @@ module.exports = {
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','GTM-M4WMB9F');</script>
+})(window,document,'script','dataLayer','GTM-NCDTF39');</script>
 <!-- End Google Tag Manager -->`,
     },
     body: {
       raw: `<!-- Google Tag Manager (noscript) -->
-<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M4WMB9F"
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NCDTF39"
 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <!-- End Google Tag Manager (noscript) -->`,
     },