fix: Section with Overflow visibility (#138)

RocketChat · Feb 7, 2020 · d0da3cd · d0da3cd
1 parent cf9da5f
commit d0da3cd
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/packages/fuselage-ui-kit/src/Overflow.js b/packages/fuselage-ui-kit/src/Overflow.js
@@ -1,6 +1,5 @@
-import React, { useRef } from 'react';
+import React, { useRef, useCallback } from 'react';
 import {
-  AnimatedVisibility,
   Button,
   PositionAnimated,
   Options,
@@ -15,12 +14,19 @@ const convertOptions = (options, parser) => options.map(({ text, value }) => [va
 export const Overflow = ({ context, options, parser, ...element }) => {
   const [{ loading }, action] = useBlockContext(element, context);
 
-  const handleSelection = ([value]) => action({ target: { value } });
+  const fireChange = ([value]) => action({ target: { value } });
   const convertedOptions = convertOptions(options, parser.text);
-  const [cursor, handleKeyDown, handleKeyUp, , [visible, hide, show]] = useCursor(-1, convertedOptions, (args, [, hide]) => {
-    handleSelection(args);
+  const [cursor, handleKeyDown, handleKeyUp, reset, [visible, hide, show]] = useCursor(-1, convertedOptions, (args, [, hide]) => {
+    fireChange(args);
+    reset();
     hide();
   });
+
+  const handleSelection = useCallback((...args) => {
+    fireChange(...args);
+    reset();
+    hide();
+  }, []);
   const ref = useRef();
   return (
     <>
@@ -37,7 +43,7 @@ export const Overflow = ({ context, options, parser, ...element }) => {
       </Button>
       <PositionAnimated
         width='auto'
-        visible={visible ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN}
+        visible={visible}
         anchor={ref}
         placement='bottom right'
       >