{"action":"created","issue":{"url":"https://api.github.com/repos/final-form/react-final-form/issues/268","repository_url":"https://api.github.com/repos/final-form/react-final-form","labels_url":"https://api.github.com/repos/final-form/react-final-form/issues/268/labels{/name}","comments_url":"https://api.github.com/repos/final-form/react-final-form/issues/268/comments","events_url":"https://api.github.com/repos/final-form/react-final-form/issues/268/events","html_url":"https://github.com/final-form/react-final-form/issues/268","id":329388380,"node_id":"MDU6SXNzdWUzMjkzODgzODA=","number":268,"title":"[Bug?] Placeholders not passed down from field to children input when using render function","user":{"login":"Aduqoum","id":13884913,"node_id":"MDQ6VXNlcjEzODg0OTEz","avatar_url":"https://avatars2.githubusercontent.com/u/13884913?v=4","gravatar_id":"","url":"https://api.github.com/users/Aduqoum","html_url":"https://github.com/Aduqoum","followers_url":"https://api.github.com/users/Aduqoum/followers","following_url":"https://api.github.com/users/Aduqoum/following{/other_user}","gists_url":"https://api.github.com/users/Aduqoum/gists{/gist_id}","starred_url":"https://api.github.com/users/Aduqoum/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Aduqoum/subscriptions","organizations_url":"https://api.github.com/users/Aduqoum/orgs","repos_url":"https://api.github.com/users/Aduqoum/repos","events_url":"https://api.github.com/users/Aduqoum/events{/privacy}","received_events_url":"https://api.github.com/users/Aduqoum/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-06-05T10:08:22Z","updated_at":"2018-06-07T18:50:10Z","closed_at":null,"author_association":"NONE","body":"<!--\r\n\r\n👋 Hey, thanks for taking an interest in 🏁 React Final Form!\r\n\r\n-->\r\n\r\n### Are you submitting a **bug report** or a **feature request**?\r\nBug, I think. it might be how the intentional though\r\n<!-- For support request, please use Stack Overflow instead. This issue tracker is reserved for bugs and features. -->\r\n\r\n### What is the current behavior?\r\nThe place holder field prop are not passed down to the input when using render function to show input\r\n<!-- If this is a bug, please include steps to reproduce and a minimal demo of the problem using Sandbox, Plunkr, WebpackBin or JSFiddle. -->\r\n\r\n### What is the expected behavior?\r\nThe place holder is passed down to the children maybe?\r\n### Sandbox Link\r\nhttps://codesandbox.io/s/pm5vll9jyx\r\n<!-- Problems are much easier to understand and debug if they can be demonstrated in a minimal environment.  -->\r\n\r\n### What's your environment?\r\nFinal form: 4.6.1\r\nReact final form: 3.4.0\r\n<!-- Include 🏁 React Final Form version, 🏁 Final Form version, OS/browser affected, Node version, etc. -->\r\n\r\n### Other information\r\nN/A\r\n<!-- Include here any detailed explanation, stacktraces, related issues, links for Stack Overflow, Twitter, etc. -->\r\n"},"comment":{"url":"https://api.github.com/repos/final-form/react-final-form/issues/comments/395526226","html_url":"https://github.com/final-form/react-final-form/issues/268#issuecomment-395526226","issue_url":"https://api.github.com/repos/final-form/react-final-form/issues/268","id":395526226,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NTUyNjIyNg==","user":{"login":"arthurdenner","id":13774309,"node_id":"MDQ6VXNlcjEzNzc0MzA5","avatar_url":"https://avatars0.githubusercontent.com/u/13774309?v=4","gravatar_id":"","url":"https://api.github.com/users/arthurdenner","html_url":"https://github.com/arthurdenner","followers_url":"https://api.github.com/users/arthurdenner/followers","following_url":"https://api.github.com/users/arthurdenner/following{/other_user}","gists_url":"https://api.github.com/users/arthurdenner/gists{/gist_id}","starred_url":"https://api.github.com/users/arthurdenner/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/arthurdenner/subscriptions","organizations_url":"https://api.github.com/users/arthurdenner/orgs","repos_url":"https://api.github.com/users/arthurdenner/repos","events_url":"https://api.github.com/users/arthurdenner/events{/privacy}","received_events_url":"https://api.github.com/users/arthurdenner/received_events","type":"User","site_admin":false},"created_at":"2018-06-07T18:50:10Z","updated_at":"2018-06-07T18:50:10Z","author_association":"NONE","body":"Hi, @Aduqoum. I believe this behaviour is intentional and is correct. If you pass to `Field` a component to render through the `component` prop, it will spread the properties that do not interest `final-form` (such as `placeholder` and `type`. Since you are specifying what will render through the render function, it's up to you to spread the other properties, because `input` contains only what it's interesting to `final-form` (`name`, `value`, `onChange`). So, what you should do is something like the following code:\r\n\r\n```javascript\r\n<Field component=\"input\" name=\"username\" placeholder=\"Username\">\r\n  {({ input, meta, ...otherProperties }) => (\r\n    // otherProperties = placeholder, type...\r\n    <div>\r\n      <label>Username</label>\r\n      <input {...input} {...otherProperties} />\r\n      {(meta.error || meta.submitError) &&\r\n        meta.touched && <span>{meta.error || meta.submitError}</span>}\r\n    </div>\r\n  )}\r\n</Field>\r\n```\r\nI hope this explanation makes sense to you, I'm not very good in explaining things. You can also `console.log` the `input` property provided in the render function to see which ones I mean with \"contains only what it's interesting to `final-form`.\""}}
{"actor":{"display_login":"arthurdenner"}}