DouyinFE / semi-design

🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 3000+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click
https://semi.design
Other
8.19k stars 695 forks source link

[Select] 单选 ➕ renderSelectedItem ➕ placeholder 合并使用,defaultValue 为 undefined 或 null 组件表现不一致 #1584

Closed YannLynn closed 1 year ago

YannLynn commented 1 year ago

Is there an existing issue for this?

Which Component

Select

Semi Version

latest

Current Behavior

在 renderSelectedItem 传入的情况下: defaultValue 为 null,placeholder 不出现(因为渲染了 renderSelectedItem ❌) defaultValue 为 undefined,placeholder 出现 (未进入 renderSelectedItem 逻辑 ✅)

Expected Behavior

在 renderSelectedItem 传入的情况下,统一 defaultValue 为 null 和 undefined 的行为,渲染 placeholder。 Select 认为空字符串也是一个可合法展示的值,与 null 和 undefined 不同,所以 defaultValue === ‘’ 时,允许进入 renderSelectedItem 逻辑,目前表现符合预期不用再做处理。

Steps To Reproduce

No response

ReproducibleCode

import React from 'react';
import { Select } from '@douyinfe/semi-ui';

() => {
    return (
    <>
        <Select filter style={{ width: 180 }} 
        showArrow={false}
        // defaultValue={null}
        defaultValue={undefined}
        placeholder="带搜索功能的单选"
        renderSelectedItem={(item) =>{
        console.log('items', item);  
         return <div>{item.label}</div>
    }}
        >
            <Select.Option value="abc">抖音</Select.Option>
            <Select.Option value="ulikecam">轻颜相机</Select.Option>
            <Select.Option value="jianying">剪映</Select.Option>
            <Select.Option value="xigua">西瓜视频</Select.Option>
        </Select>
    </>
);
}

Environment

- OS:
- browser:

Anything else?

YannLynn commented 1 year ago

fixed in 2.35.0