question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Enable i18n for placeholders and FieldDecorator messages among others

See original GitHub issue

Version

2.9.2

Environment

OS X, Chrome, React Intl

Reproduction link

https://github.com/enzolutions/antd-intl-demo

Steps to reproduce

$ git clone git@github.com:enzolutions/antd-intl-demo.git
$ npm run dev
$ npm run start

Open your browser at page http://127.0.0.1:8000/

You could see the input have a [object object] text inside as you can see in the following image

antd-intl-incompatibility

What is expected?

Field decorator message and input placeholder could be translated in the same way the Form Item label is translated

What is actually happening?

The translation object is not processed and the object type is rendered as string


I tried also with another i18n library https://github.com/vazco/meteor-universe-i18n with the same behavior.

The Antd library must be objected to enable those elements and similar accept object to enable a full translation

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
afc163commented, Apr 24, 2017

It is not a antd related problem.

You can’t use <FormattedMessage /> in native input placeholder either, which only accept string type value.

<input placeholder={<FormattedMessage id="xxx" />} /> // broken
<input placeholder={intl.formatMessage({ id: 'xxx' })} /> // good
0reactions
HSin-Tsecommented, Mar 17, 2021
import React from 'react';
import { injectIntl } from 'react-intl';
import { Input} from "antd";

const Input18 = ({ intl}) => {
    console.log(intl);
    return <Input type="text" placeholder={intl.formatMessage({id: 'email'})}/>
};

export default injectIntl(Input18)

import Input18 from './input';

       <Input18
                    prefix={<UserOutlined/>}
                    size="large"
      

                />
Read more comments on GitHub >

github_iconTop Results From Across the Web

Enable i18n for placeholders and FieldDecorator ... - Issuehunt
Enable i18n for placeholders and FieldDecorator messages among others #5866 ... have a [object object] text inside as you can see in the...
Read more >
React i18n: A step-by-step guide to React-intl - Lokalise Blog
Adding arguments/placeholders; Building a locale selector in React i18n. Adding a wrapper; Rendering the language switcher.
Read more >
Form - Ant Design
High performance Form component with data scope management. Including data collection, verification, and styles.
Read more >
Textarea Usage - ServiceNow Developers
Text area input fields are used in forms and other use cases which require ... Required indicator: Field decorator that indicates if a...
Read more >
Locale-specific message reference - Mozilla - MDN Web Docs
$placeholder_name$ (case insensitive) to insert a particular placeholder (for example $URL$ in the example above) into your string. $1 , $2 , $3 ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found