From d918f7c73d67665496788d8f82997192094ba7ab Mon Sep 17 00:00:00 2001
From: jigsawye <jigsaw.ye@gmail.com>
Date: Mon, 4 Mar 2019 12:11:01 +0800
Subject: [PATCH] fix(tags): prevent emit onClosed on initial

---
 packages/tailor-ui/src/Tag/Tag.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/tailor-ui/src/Tag/Tag.tsx b/packages/tailor-ui/src/Tag/Tag.tsx
index f12bf446..82084fd3 100644
--- a/packages/tailor-ui/src/Tag/Tag.tsx
+++ b/packages/tailor-ui/src/Tag/Tag.tsx
@@ -1,12 +1,11 @@
 import React, { FunctionComponent, PureComponent, useState } from 'react';
 import styled from 'styled-components';
 import { MdClose } from 'react-icons/md';
-import { animated, useSpring } from 'react-spring';
+import { animated, config, useSpring } from 'react-spring';
 import { omit } from 'ramda';
 
 import Icon from '../Icon';
 import tag from '../utils/CleanTag';
-import useMeasure from '../utils/useMeasure';
 
 const StyledTag = styled(tag.div)`
   display: inline-flex;
@@ -52,7 +51,6 @@ const ClosableTag: FunctionComponent<ClosableTagProps> = ({
   onClosed,
   ...props
 }) => {
-  const [bind, { width: boundWidth }] = useMeasure();
   const [on, setOn] = useState(true);
 
   const styles = useSpring({
@@ -61,15 +59,16 @@ const ClosableTag: FunctionComponent<ClosableTagProps> = ({
         onClosed();
       }
     },
-    transform: on ? 'scale(1)' : 'scale(0)',
+    immediate: on,
     opacity: on ? 1 : 0,
-    width: on ? boundWidth : 0,
+    width: on ? 'auto' : 0,
     marginLeft: on ? 8 : 0,
+    config: config.stiff,
   });
 
   return (
     <AnimatedStyledTagWrapper style={styles}>
-      <div style={{ display: 'inline-flex' }} {...bind}>
+      <div style={{ display: 'inline-flex' }}>
         <StyledTag {...props}>
           {children}
           <CloseIcon