On Android and iOS, not working "Select All" text in <input type="text"> with ons-sliding-menu

In case in ons-sliding-menu, both Android(4.4 - 6.0) and iOS(9.3.1) text menu "Select All" don't work correctly.

("Copy", "Cut" and "Paste" work fine.)

See below with Android or iOS.

http://codepen.io/nf_takahashi/pen/oxqbJw

Is that a bug?!

ons.bootstrap();

<ons-sliding-menu main-page="page1.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu">
</ons-sliding-menu>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <p style="text-align: center; color: #999; padding-top: 100px;"><input type=text></p>
    
  </ons-page>
</ons-template>


<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 2</div>
    </ons-toolbar>

    <p style="text-align: center; color: #999; padding-top: 100px;">Page2 Contents</p>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page2.html', {closeMenu: true})">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>

Solution

I would consider this a bug too, since the inputs should remain selectable regardless of the other components. Though it turns out it's created due to bad default values of a library Hammer.js which Onsen 1 uses.

Fixes:

You can remove that option from the default settings before calling ons.bootstrap().
```
delete Hammer.defaults.behavior.userSelect;
ons.bootstrap();
```
The other thing which you could do is just remove the disabling:
```
document.querySelector('ons-sliding-menu').onselectstart = document.querySelector('.onsen-sliding-menu__main').onselectstart = null;
```
Note that this fix must be executed after the sliding-menu is created/ready. So in your case just wrapping it in ons.ready(function(){ /* fix */ }) was enough.

If you are creating a page with a sliding menu later then you would need to wait for the page init for example and then apply the fix.

Here's a demo where you can see the two fixes in action.

Anyway the first fix is probably easier, but I just came up with the second one initially, so I decided to include that too.