fix(input): better mobile experience #93
Conversation
| v-model="query" | ||
| ref="input" | ||
| :placeholder="placeholder" | ||
| > |
There was a problem hiding this comment.
I'm missing the reset button here.
I understand that there's no submit button by default, but a reset is a feature that only a few browsers have, so ...
There was a problem hiding this comment.
I agree but I would like to keep as much granularity as possible regarding components.
I'm already not very happy with the input no longer being the root element of this component because I now have to forward placeholder.
Maybe we should introduce a component like SearchForm:
<ais-form>
<ais-input/>
<ais-clear/>
<ais-submit/>
</ais-form>
Maybe I should just add the clear to the input component, but then it shouldn't be called input anymore.
| v-model="query" | ||
| > | ||
| <form role="search" action="" @submit.prevent="onFormSubmit"> | ||
| <input type="search" |
There was a problem hiding this comment.
submit button and its "submit on enter" behaviour is missing here. Is that on purpose?
There was a problem hiding this comment.
For me the submit works without that button so I didn't add it.
There was a problem hiding this comment.
On what kind of browser doesn't it submit on keypress if now submit button is present?
There was a problem hiding this comment.
People that don't press enter, but click.
There was a problem hiding this comment.
OK, but given we don't add styles by default, it will mean that users will need to hide this button everytime. Not an ideal workflow. Maybe we can leverage v-show here.
|
I will tackle this tomorrow to come up with a solution that is more satisfying than the current implementation. I agree that providing the reset button would be better. Maybe changing the naming to reflect that could help. Current is PS: thanks to your suggestions I learned that you can natively clear a search input with |
| <ais-input :placeholder="placeholder"></ais-input> | ||
| <button type="submit" :class="bem('submit')"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 40 40"> | ||
| <path |
There was a problem hiding this comment.
can you add a <title> to this with search, which is translatable?
| </button> | ||
| <ais-clear> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"> | ||
| <path |
There was a problem hiding this comment.
here as well, with clear
|
Regarding translations, it is a concept we will need to discuss at some point I guess. For now, I just exposed the 2 titles as props. |
…ch-input-mobile fix(input): better mobile experience
According to the wonderful reading about search UX ;)
Magnifying is a theming concern.
Not sure about submit button though, nowadays, no JS is very rare.