add default name attr to input as placeholder #20
Conversation
addon/components/fl-input.hbs
Outdated
| @@ -20,6 +20,7 @@ | |||
| @value={{@value}} | |||
| class="{{this.inputBaseClass}}" | |||
| id={{this.id}} | |||
| name={{or @name @placeholder}} | |||
There was a problem hiding this comment.
@napafundi is this for a11y concerns? My only question is generally name attributes are "code friendly" names, e.g. no spaces/punctuation ect, so using the placeholder value might not always be best, its possible we want to sanitize the placeholder (replace spaces w/ underscores, etc) before using it here. But, might not be the end of the world.
addon/components/fl-input.ts
Outdated
| @@ -50,6 +52,11 @@ export default class FlInput<T extends FlInputArgs> extends Component<T> { | |||
| return this.args.id ?? `fl-input-${guidFor(this)}`; | |||
| } | |||
|
|
|||
| get inputName() { | |||
| const name = this.args.name ?? this.args.placeholder; | |||
| return name ? dasherize(name) : ''; | |||
There was a problem hiding this comment.
prob shouldnt touch a manually passed in name arg. e.g.
get inputName() {
return this.args.name ?? dasherize(this.args.placeholder);
}also i forget, but does dasherize() handle stripping out non alphanumeric symbols for you too? e.g. for like "Bob's Payment Amount ($)" => "bobs-payment-amount"
There was a problem hiding this comment.
Turns out it doesn't. Updated that to remove non-word characters as ^ ended up as "bob's-payment-amount-($)"
addon/components/fl-select.ts
Outdated
| @@ -40,6 +41,11 @@ export default class FlSelect extends FlInput<FlSelectArgs> { | |||
| return !this.allowClear; | |||
| } | |||
|
|
|||
| get selectName() { | |||
There was a problem hiding this comment.
id probably rename the getter in FlInput to something more generic like just get name(), so that you don't have to reimplement in here or FlTextarea, since both extend FlInput.
addon/components/fl-input.ts
Outdated
| @@ -50,6 +52,11 @@ export default class FlInput<T extends FlInputArgs> extends Component<T> { | |||
| return this.args.id ?? `fl-input-${guidFor(this)}`; | |||
| } | |||
|
|
|||
| get name() { | |||
| const name = this.args.name ?? this.args.placeholder; | |||
| return name ? dasherize(name.replace(/\W/g, '')) : ''; | |||
There was a problem hiding this comment.
looks good i just wouldn't muck with a manually passed in @name arg value, i'd do it like:
get name() {
return this.args.name ?? dasherize(this.args.placeholder?.replace(/\W/g, '') ?? '');
}
No description provided.