react-jsonschema-form
react-jsonschema-form copied to clipboard
rjsf-team
Placeholder not working
Prerequisites
- [x] I have searched the existing issues
- [x] I understand that providing a SSCCE example is tremendously useful to the maintainers.
- [x] I have read the documentation
- [x] Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.
What theme are you using?
core
Version
5.16.1
Current Behavior
Placeholder not working. Link to playground example
https://rjsf-team.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJEQlNCYXNpY1JlcXVlc3RDb2xsZWN0aW9uIjp7IkVtcGxveWVyTmFtZSI6IiIsIkVtcGxveW1lbnRTZWN0b3IiOiIifX0sInNjaGVtYSI6eyJkZWZpbml0aW9ucyI6eyJFbXBsb3ltZW50Ijp7InR5cGUiOiJzdHJpbmciLCJlbnVtIjpbIjQ2NTdDNEY2LTIzMjYtNEIwRi05ODkxLUU5OTU2Mjg3Q0Y5NiIsIjFFRkYxQzVELUYxMkQtNDU0Ny1BRTM0LTMwN0Q2RjIzRTMxRSIsIjgzNzlFQzE4LUU5NEQtNDg1RC1BMzcwLTVCRERGMjMxMzgwRSJdLCJlbnVtTmFtZXMiOlsiTG9jYWwgR292ZXJubWVudCIsIkNlbnRyYWwgR292ZXJubWVudCIsIlB1YmxpYyBTZWN0b3ItT3RoZXIiXX19LCJwcm9wZXJ0aWVzIjp7IkRCU0Jhc2ljUmVxdWVzdENvbGxlY3Rpb24iOnsidHlwZSI6Im9iamVjdCIsInRpdGxlIjoiIiwicmVxdWlyZWQiOlsiRW1wbG95ZXJOYW1lIiwiRW1wbG95bWVudCJdLCJwcm9wZXJ0aWVzIjp7IkVtcGxveWVyTmFtZSI6eyJ0eXBlIjoic3RyaW5nIiwidGl0bGUiOiJFbXBsb3llciBOYW1lIiwiZGVmYXVsdCI6IiIsIm1heExlbmd0aCI6NjR9LCJFbXBsb3ltZW50Ijp7InR5cGUiOiJzdHJpbmciLCIkcmVmIjoiIy9kZWZpbml0aW9ucy9FbXBsb3ltZW50IiwidGl0bGUiOiJFbXBsb3ltZW50IFNlY3RvciIsImRlZmF1bHQiOiIiLCJtYXhMZW5ndGgiOjY0fX19fX0sInVpU2NoZW1hIjp7InVpOm9yZGVyIjpbIkRCU0Jhc2ljUmVxdWVzdENvbGxlY3Rpb24iXSwiREJTQmFzaWNSZXF1ZXN0Q29sbGVjdGlvbiI6eyJ1aTpvcmRlciI6WyJFbXBsb3llck5hbWUiLCJFbXBsb3ltZW50Il0sIkVtcGxveW1lbnQiOnsidWk6cGxhY2Vob2xkZXIiOiJDaG9vc2UgT25lIn19fSwidGhlbWUiOiJkZWZhdWx0IiwibGl2ZVNldHRpbmdzIjp7InNob3dFcnJvckxpc3QiOiJ0b3AiLCJleHBlcmltZW50YWxfZGVmYXVsdEZvcm1TdGF0ZUJlaGF2aW9yIjp7ImFycmF5TWluSXRlbXMiOnsicG9wdWxhdGUiOiJwb3B1bGF0ZSIsIm1lcmdlRXh0cmFEZWZhdWx0cyI6ZmFsc2V9LCJhbGxPZiI6InNraXBEZWZhdWx0cyIsImNvbnN0QXNEZWZhdWx0cyI6ImFsd2F5cyIsImVtcHR5T2JqZWN0RmllbGRzIjoicG9wdWxhdGVSZXF1aXJlZERlZmF1bHRzIiwibWVyZ2VEZWZhdWx0c0ludG9Gb3JtRGF0YSI6InVzZUZvcm1EYXRhSWZQcmVzZW50In0sIm9taXRFeHRyYURhdGEiOmZhbHNlLCJsaXZlT21pdCI6ZmFsc2UsIm5vVmFsaWRhdGUiOmZhbHNlLCJub0h0bWw1VmFsaWRhdGUiOmZhbHNlLCJkaXNhYmxlZCI6ZmFsc2V9LCJ2YWxpZGF0b3IiOiJBSlY4In0=
Expected Behavior
The Employment Sector should display Choose One
Steps To Reproduce
Environment
- OS: Ubuntu 22.04
- Node: 20.18.2
- npm:10.8.2
Anything else?
No response
@paulcdd The issue goes away if you remove the default value "", which is not a valid value for your enumeration.
In #4200 (to fix #4197) we changed this so the placeholder is only shown if the default value is undefined.
@heath-freenome Would it make sense for us to change this behavior add a case to show the placeholder if the default value is the empty string AND the empty string is not included in the enumOptions?
@nickgros @paulcdd I would suggest we add a console.error() when someone has a default value that is not in the list of options for an enum. It seems like this is a situation where the JSON Schema is incorrectly defined and the UI is doing what it was asked.
