fix(select): text ellipsis error (#920)

fix #914 Co-authored-by: shiliqian <shiliqian@growingio.com>
growingio · Apr 2, 2021 · da73353 · da73353 · vercel · Apr 2, 2021
1 parent 3ebc2bb
commit da73353
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 38 deletions.
diff --git a/src/components/select/Select.stories.tsx b/src/components/select/Select.stories.tsx
@@ -33,14 +33,22 @@ const templatestOptions = values.map((value, index) => ({
   groupValue: 'platform',
   groupLabel: '应用平台',
 }));
-
+const templatestEllipsisOptions = values.map((value, index) => ({
+  value,
+  label: labels[index].repeat(6),
+  groupValue: 'platform',
+  groupLabel: '应用平台',
+}))
 const Template: Story<SelectProps> = (args) => (
-    <div>
-      <Select {...args} />
-      <br />
-      <br />
-      <Select {...args} style={{ width: '300px' }} />
-    </div>
+  <div>
+    <Select {...args} options={templatestEllipsisOptions} />
+    <br />
+    <br />
+    <Select {...args} style={{ width: '300px' }} />
+    <br />
+    <br />
+    <Select {...args} options={templatestEllipsisOptions} style={{ width: '300px' }} />
+  </div>
   );
 export const Default = Template.bind({});
 const DefaultArgs: SelectProps = {

diff --git a/src/components/select/Selector/index.tsx b/src/components/select/Selector/index.tsx
@@ -48,7 +48,7 @@ const Selector: React.ForwardRefRenderFunction<unknown, SelectorProps> = (props,
   const isEmptyValue = useMemo(() => !isEmpty(value), [value]);
   const showClose = allowClear && (isEmptyValue || input) && isHovered && !disabled;
   const selectValuesWidth = selectValuesRef?.current?.getBoundingClientRect()?.width;
-  const isShowTooltip = (selectValuesWidth || 0) - (selectorAllRef?.current?.clientWidth || 0) <= 0;
+  const isShowTooltip = style?.width && (selectValuesWidth || 0) - (selectorAllRef?.current?.offsetWidth || 0) <= 0;
 
   useImperativeHandle(ref, () => ({
     clientWidth: selectorRef?.current?.clientWidth,
@@ -131,41 +131,51 @@ const Selector: React.ForwardRefRenderFunction<unknown, SelectorProps> = (props,
     }, []);
 
     return (searchType === 'inner' || !input) && !isNil(value) ? (
-      <div
-        className={`${prefix}-item-all`}
-        style={{ maxWidth: style && style.width && style?.width > 0 ? 'fill-available' : undefined }}
+      <ToolTip
+        disabled={!isShowTooltip}
+        title={allValueLabel?.join(',')}
+        placement="bottom"
+        getTooltipContainer={()=> selectorRef?.current?.parentElement || document.body}
       >
-        <ToolTip
-          overlayStyle={{ width: selectorRef?.current?.clientWidth }}
-          arrowPointAtCenter
-          disabled={!isShowTooltip}
-          title={allValueLabel?.join(',')}
-          placement="bottom"
+        <div
+          className={`${prefix}-item-all`}
+          style={{ maxWidth: style && style.width && style?.width > 0 ? 'fill-available' : undefined }}
         >
-          <span ref={selectorAllRef} className={`${prefix}-item-all-text`}>
-            {allValueLabel?.join('，')}
-          </span>
-        </ToolTip>
-      </div>
+          <div className={`${prefix}-item-tooltip-container`}>
+            <span
+              ref={selectorAllRef}
+              className={classnames(`${prefix}-item-all-text`,{
+              [`${prefix}-item-text-visibility`]:isShowTooltip
+            })}
+            >
+              {allValueLabel?.join('，')}
+            </span>
+            { isShowTooltip && <span className={classnames(`${prefix}-item-text-ellipsis`)}>{allValueLabel?.join('，')}</span>}
+          </div>
+        </div>
+      </ToolTip>
     ) : null;
+
   };
 
   const renderSingleValue = () => {
     const text = optionLabelRenderer(value as string | number, getOptionByValue(value as string | number));
     return !input && (typeof value === 'string' || typeof value === 'number') ? (
-      <div className={`${prefix}-item`}>
-        <ToolTip
-          disabled={!isShowTooltip}
-          overlayStyle={{ width: selectorRef?.current?.clientWidth }}
-          arrowPointAtCenter
-          title={text}
-          placement="bottom"
-        >
-          <span ref={selectorAllRef} className={`${prefix}-item-text`}>
+      <ToolTip
+        disabled={!isShowTooltip}
+        title={text}
+        placement="bottom"
+        getTooltipContainer={()=>selectorRef?.current?.parentElement || document.body}
+      >
+        <div className={classnames(`${prefix}-item`)}>      
+          <span
+            ref={selectorAllRef}
+            className={classnames(`${prefix}-item-text`)}
+          >
             {text}
           </span>
-        </ToolTip>
-      </div>
+        </div>
+      </ToolTip>
     ) : null;
   };
 

diff --git a/src/components/select/__tests__/__snapshots__/Select.test.js.snap b/src/components/select/__tests__/__snapshots__/Select.test.js.snap
@@ -34,11 +34,11 @@ exports[`<Select /> Single Multiple options or groupOptions  renders <Select />
       >
         <div
           className="gio-select-item"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
           <span
             className="gio-select-item-text"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
           >
             全部
           </span>
@@ -120,11 +120,11 @@ exports[`<Select /> Single Multiple options or groupOptions  renders <Select />
       >
         <div
           className="gio-select-item"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
           <span
             className="gio-select-item-text"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
           >
             全部
           </span>

diff --git a/src/components/select/style/index.less b/src/components/select/style/index.less
@@ -90,6 +90,7 @@
 
   &-item {
     max-width: 100%;
+    overflow: hidden;
     font-size: @select-input-fontSize;
     transition: margin 0.2s;
 
@@ -115,6 +116,8 @@
 
     &-text {
       overflow: hidden;
+      font-size: 14px;
+      line-height: 22px;
       white-space: nowrap;
       text-overflow: ellipsis;
     }
@@ -303,7 +306,7 @@
 
   &-isSelected {
     color: @color-background-button-primary-hover;
-    background-color: @palette-gray-3;
+    background-color: @palette-gray-1;
   }
 }