Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A-Input组件不设置placeholder,但是会显示另一个B-Input组件的placeholder值 #764

Closed
nenzo2016 opened this issue Mar 6, 2023 · 5 comments

Comments

@nenzo2016
Copy link

NutUI scenes(nutui 场景)

H5(@nutui/nutui-react)

NutUI-react version(nutui-react 版本)

1.4.9

React version(react 版本)

18.2.0

Operating environment(运行环境)

dev:h5

Citation method(引用方式)

npm

Node version(node 版本)

16.18.1

Browser and its version(浏览器及其版本)

Chrome(106.0.5249.119)

System and its version(系统及其版本)

window11

What is expected?(期望的结果是什么?)

Input组件不设置placeholder,应不显示

What is actually happening?(实际的结果是什么?)

Input组件不设置placeholder,显示了另一个Input的placeholder值

@oasis-cloud
Copy link
Collaborator

提供一份 input 使用的 demo 吧,单独看 issue 中的描述,无法得知应该如何复现

@CaniceZ
Copy link
Contributor

CaniceZ commented Mar 7, 2023

小程序端也有这个问题 第一个input的placeholder有值,第二个为空的时候显示异常
image
<Input name='number' label='银行卡' placeholder='银行卡' defaultValue={state.bankcount} inputAlign='right' type='digit' maxlength={18} /> <Input name='tel' labelWidth='120' label='银行卡预留手机号' placeholder='' defaultValue={state.tel} inputAlign='right' type='tel' border={false}

@sushi-su
Copy link

sushi-su commented Mar 7, 2023

看了下源码应该是受到多语言配置的影响
image
image

@sushi-su
Copy link

sushi-su commented Mar 7, 2023

删掉这两行代码应该能解决这个问题,但是没看懂为什么在 Input 组件中修改 locale 的配置,猜测可能有其他需求用到这个特性,需要官方人员看看

locale.placeholder = placeholder || locale.placeholder

locale.placeholder = placeholder || locale.placeholder

@AnteeHub
Copy link
Contributor

AnteeHub commented Mar 7, 2023

小程序端也有这个问题 第一个input的placeholder有值,第二个为空的时候显示异常 image <Input name='number' label='银行卡' placeholder='银行卡' defaultValue={state.bankcount} inputAlign='right' type='digit' maxlength={18} /> <Input name='tel' labelWidth='120' label='银行卡预留手机号' placeholder='' defaultValue={state.tel} inputAlign='right' type='tel' border={false}

协助补充了一个复现的 demo:
https://github.com/AnteeHub/nutui-react-taro-present/tree/input-placeholder

或者在任意的 taro 项目中添加以下代码:

import { Input } from "@nutui/nutui-react-taro";

export default () => {
  return (
    <>
      <Input
        name="number"
        label="银行卡"
        placeholder="银行卡"
        defaultValue={''}
        inputAlign="right"
        type="digit"
        maxlength={18}
      />
      <Input
        name="tel"
        labelWidth="120"
        label="银行卡预留手机号"
        placeholder=""
        defaultValue={''}
        inputAlign="right"
        type="tel"
        border={false}
      />
    </>
  );
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants