ListView item with interactive inputs and itemsReorderable property set, not working properly

Question

If a listview with itemsReorderable set to true and input elements with win-interactive class behaves strangely. 

Inputs are not working when clicking on it.  Needs multiple clicks to be able to type in it and cursor positions not being right when there a value for input already.

I can recreate it in Controls_ListViewItemTemplating sample.

In scenario 2 if I set the listview itemsReorderable property to true the inputs not working right.

Is there any way to have both reorderable items and interactive items?

Answer 1

Hi ner9G,

Did you have some test sample for us? I add win-interactive class to a input textbox inside DataTemplate of ListView, see my screenshot, it works fine without any problem.

        <div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
            <div class="smallListIconTextItem">
                <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" draggable="false" />
                <div class="smallListIconTextItem-Detail">
                    <h4 data-win-bind="innerText: title"></h4>
                    <h6 data-win-bind="innerText: text"></h6>
                    <input class="win-interactive" type="text"/>
                </div>
            </div>
        </div>

--James

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 2

Hi James,

Did you set itemsReorderable to true in the list view?

        <div id="listView" 
            class="win-selectionstylefilled"
            data-win-control="WinJS.UI.ListView" 
            data-win-options="{ 
                itemDataSource: myData.dataSource, 
                itemTemplate: regularListIconTextTemplate, 
                selectionMode: 'none', 
                tapBehavior: 'none', 
                swipeBehavior: 'none', 
                itemsReorderable: 'true',
                layout: { type: WinJS.UI.GridLayout } 
            }"
        ></div>

When itemsReorderable not set, the interactive inputs gets focus with a single click of mouse.  But when itemsReorderable is set the inputs doesn't gets the focus with a single mouse click(which is what I want).  It requires doubleclick to get focus, which is not the expected behaviour.