Mouse down on textfield inside table cause view to jump

karliss commented 4 years ago

Expected Behavior

Clicking on a textfield either doesn't cause view to move or moves it inside view when it's on edge.

Current Behavior

When mouse is pressed down on a textfield, view jumps to the top, when mouse is released it jumps back down.

Possible Solution

Seems to be related to mouse drag. Maybe clicking on text field causes a subset of mouse events to be sent to scrollview causing mouse drag to unexpectedly activate in a broken way.

Steps to Reproduce (for bugs)

Run the sample code
Scroll to the bottom
Press down the mouse on one of text fields, don't release it.
Observe that view jumped to the top
Release the mouse observe that view jumps back down

Media

Test app / minimal test case

Note the list of item needs to be sufficiently long.

<vbox width="100%">
    <tableview width="100%" height="200">
        <header width="100%">
            <column id="colA" text="Column A" width="50" />
            <column id="colB" text="Column B" width="200" />
            <column id="colC" text="Column C" width="400" />
        </header>

        <item-renderer>
            <textfield id="colA" width="30"/> 
        </item-renderer>
        <item-renderer>
            <label id="colB" /><button text="foo"/>
        </item-renderer>
        <item-renderer>
            <textfield id="colC" /> 
        </item-renderer>

        <data>
            <item colA="true" colB="Item 1B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 2B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="false" colB="Item 3B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 4B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="false" colB="Item 5B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 6B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 7B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="false" colB="Item 8B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 4B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 3B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 2B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 9B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
            <item colA="true" colB="Item 1B" colC="haxeui-core/styles/default/haxeui_small.png" /> 
        </data>
    </tableview>
</vbox>

Context

Your Environment

Version used: haxeui-core 1.0.21 + haxeui-html5 1.05, also repeatable in http://haxeui.org/ playground
Environment name and version (e.g. Chrome 39, node.js 5.4): Firefox 72.0.2
Operating System and version (desktop or mobile): Linux
Link to your project:

ianharrigan commented 4 years ago

I wonder if this is related to "ensureVisible" in ScrollView. If you return instantly from that function does the issue go away?

Either way, ill take a look

karliss commented 4 years ago

My guess about drag scrolling might be wrong. Tried changing scrollMode to ScrollMode.NORMAL as workaround, but it didn't help.

ianharrigan commented 4 years ago

my guess is its this function: https://github.com/haxeui/haxeui-core/blob/master/haxe/ui/containers/ScrollView.hx#L63-L97

ianharrigan commented 4 years ago

If you remove, comment it out, whatever, does it fix the problem?

karliss commented 4 years ago

Yes, disabling ensureVisible prevents the problem.

ianharrigan commented 4 years ago

thought so... ensureVisible needs some work to get the coords right then... well, its good news, nothing wrong with list, table, scroll, its just trying to jump to the wrong place because you gave a control focus. :/

karliss commented 1 year ago

Can't repeat this anymore. Probably fixed.

haxeui / haxeui-core