Clicking on Select in List always triggers list click

ionic-v1
1

I’m trying to have a select in a list, where each item in the list, I can change it’s status. So if they click on the select, they can change the status, but if the click on the listitem itelf, it shows them the location of the item on a map.

But when I embed a select in a list, it works fine on the web, but when I build for mobile (ios in this case) every click, no matter how precise, brings up the map (i.e. it registers as a listitem click rather than a click on the select).

Any way to have it such that clicking on the select doesn’t trigger a listitem event?

2

Hi @bigmattied,

I guess you need to tackle this situation using CSS. You just simply restrict the area of click on list, which exclude the dropdown.

Example code,

    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap">
      <a href="#/tab/chats/{{chat.id}}">
        <img ng-src="{{chat.face}}">
        <h2>{{chat.name}}</h2>
        <p>{{chat.lastText}}</p>
      </a>
        <select style="float:right">
          <option>Yes</option>
          <option>No</option>
        </select>
      </ion-item>
    </ion-list>

Hope this will help you in finding the solution of your question.

Feel free to mark it as solution if you find it worthy. You can also click on heart button for providing like.