UI - masked input onchange #6586
Conversation
|
|
||
| **Example** | ||
|
|
||
| ```js | ||
| <MaskedInput | ||
| @value={{attr.options.defaultValue}} |
There was a problem hiding this comment.
looks like the example code here got cut off! unfortunately this is one of the bugs with jsdoc2md -- it doesn't like it when components are on multiple lines. unfortunately you'll have to copy/paste the example from the component source file. womp. :/
There was a problem hiding this comment.
Oh no :( I'll fit that, that's rather unfortunate though
ui/app/components/masked-input.js
Outdated
| * /> | ||
| * ``` | ||
| * | ||
| * @param [value] {String} - The value to display in the input. | ||
| * @param [placeholder=value] {String} - The placeholder to display before the user has entered any input. | ||
| * @param [allowCopy=null] {bool} - Whether or not the input should render with a copy button. | ||
| * @param [displayOnly=false] {bool} - Whether or not to display the value as a display only `pre` element or as an input. | ||
| * @param [onChange=false] {Function|action} - A function to call when the value of the input changes. |
There was a problem hiding this comment.
yay, storybook updates in action! thank you for remembering to do this!
There was a problem hiding this comment.
oh also, should the default value of onChange be null instead of false?
There was a problem hiding this comment.
oops, copy and paste error - the default is an empty fn, I'm not sure how to express that here... 🤔
There was a problem hiding this comment.
yeah, i noticed that. i think you could try putting an empty fn in here and if that doesn't work, i think you could just omit the default value and list it like so:
* @param [onChange] {Function|action} - A function to call when the value of the input changes.
There was a problem hiding this comment.
Went with Function.prototype since all code gets escaped and garbled. Function.prototype is also an empty fn, so I think that works for now. Would be nice to do () => {} or similar instead though.
| @@ -138,6 +138,7 @@ | |||
| @value={{or (get model valuePath) attr.options.defaultValue}} | |||
| @placeholder="" | |||
| @allowCopy="true" | |||
| @onChange={{action (action "setAndBroadcast" valuePath)}} | |||
There was a problem hiding this comment.
what is the difference between the inner action (inside the parentheses) and outer action (inside the curly braces) here?
There was a problem hiding this comment.
So the outer one calls a curried version returned by the inner one, onChange just passes the value, but the inner one returns a curried setAndBroadcast with path already set.
|
this works in the ui, yay! other than my questions and the storybook fixes, looks good 2 go! |
meirish
force-pushed
the
ui-masked-input-onchange
branch
from
cf8c17e
to
4f1bdc3
Compare
* update masked-input to work with form-field component * add test for masked input onChange functionality * fix doc changes
This fixes an issue where the masked-input component wasn't firing onchange events when the value changed when it was used in conjunction with the form-field component.
To test:
Enable the OIDC auth method in the UI
Fill out the client secret field
Save the form
Observe that the the secret field gets sent to the server in the browser dev tools
Thanks for catching this @yhyakuna !