Required input attr

[cezarsmpio]

When I put required nothing happens

<Geosuggest
  placeholder="Start location"
  ref="start_location"
  required
/>

[ro-ka]

I suppose there should be a required attribute attached to the input, right?

[cezarsmpio]

Yes, the result code would be:

<div class="geosuggest ">
    <input class="geosuggest__input " type="text" value="" placeholder="Start location" required>
    <ul class="geosuggest__suggests geosuggest__suggests--hidden"></ul>
</div>

You can use spread operator, something like <input {...this.props} />

[ro-ka]

Ah, okay, will add.

[cezarsmpio]

Something like:

<input
  className={'geosuggest__input ' + this.props.inputClassName}
  ref="geosuggestInput"
  type="text"
  value={this.state.userInput}
  placeholder={this.props.placeholder}
  disabled={this.props.disabled}
  onKeyDown={this.onInputKeyDown}
  onChange={this.onInputChange}
  onFocus={this.onFocus}
  onBlur={this.hideSuggests}
  {...this.props}
/>

[ro-ka]

I wouldn’t put all the props on the element. I think a whitelist with supported attributes it the better way.

[cezarsmpio]

You can create other prop like isRequired={true}, for example.

<Geosuggest isRequired />

[wedneyyuri]

@ro-ka Are you already working on this? I also need this feature. I can do a pull request for you.

[wedneyyuri]

@ro-ka What do you think about including other attributes like autocomplete, name, id, etc...

The solution proposed by @CezarLuiz0 seems to solve this problem, in my opinion the component should not know all the properties assigned to the input element.

[ro-ka]

Will add, yes. No time till now. :)
That’s true, but it’ll attach a lot of non standard attributes to the input element. Will a whitelist with attributes that are defined in the spec to add.

[ro-ka]

Released as 1.15.0. Thanks for bringing this up!

[cezarsmpio]

Awesome! 👍

[wedneyyuri]

@ro-ka I think it's missing the id attribute.

That's the case:

<label for="place">Search Places</label>

[ro-ka]

Totally, will fix that!

[ro-ka]

Fixed in 1.15.1. Thanks! :)