Paper-Input autofocus amongst 2 competing paper-inputs

Question

I have 2 paper inputs (one in header) for a search engine and it defaults the autofocus to the header one when both have "autofocus" like so.

<paper-input id="bodyinput" name="thetext" type="text" class="searchbar" placeholder="Enter a search term here..." autofocus>
</paper-input>

The header bar is hidden on the homepage using .hide() in JS. Any way to autofocus the main search bar (non-header) only for my homepage?

I'm sharing a _header partial in rails which needs to autofocus the header in the non-homepages.

Perhaps there is a way to programmatically remove the "autofocus" part in the paper-input for the header only on the homepage with JS?

Answer 1

Just as you can bind custom element properties to strings, numbers, objects, etc., so you can with booleans.

In this scenario, you could set a variable or property of your choosing to reflect whether or not the current page is currently the homepage. Your code would be responsible for setting it to true or false. Then, you could employ data-binding like this:

<paper-input placeholder="Input #1" autofocus="[[isHomepage]]"></paper-input>
<paper-input placeholder="Input #2" autofocus="[[!isHomepage]]"></paper-input>

<script>
  ... isHomepage = true/false; ...
</script>

In this example, if isHomepage is true, then the first paper-input has auto-focus enabled. If it's false, then the second.

Here's a Plunker which demonstrates one (very basic) example of how this works: http://plnkr.co/edit/L0z4V6FVbtRDcwBk0b02?p=preview