Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    ListGrid row jumps when clicking collapse expansion caret but doesn't collapse

    I've got an issue with my ListGrid where I try to collapse an expansion panel by clicking the caret, but instead of collapsing, the row repositions and remains open. A second click will collapse the panel. I've been unable to reproduce this in your showcase, but it's very similar code to the example I put in this issue:
    https://forums.smartclient.com/forum...window-instead

    Basically, the flow for reproducing it in my code is (this reproduces it every time):
    1) load page
    2) open the first row's expansion layout
    3) scroll to the bottom (it it's quite tall)
    4) click a button which adds rows to a ListGrid contained in the expansion panel. The inner ListGrid temporarily gets wider (probably related to autofit) and overflows its VLayout container (which itself is one or two levels nested within the expansion layout), but after a split second it snaps back to be held by the VLayout.
    5) scroll back up to the top of the row and try to close it: 2 clicks are required. I can open/close the row with single clicks after that, unless I add more rows to the inner table.


    So unfortunately, I don't have anything in hand for you to test, but I'm happy to try any debugging or mitigation ideas you'd recommend. I tried things like turning off all the autofitting and calling markForRedraw+reflow on every parent all the way to the top, and the problem still occurs.

    Thanks for any advice!


    Here's a gif (i had to trim it down quite a bit so that it would be small enough):
    Click image for larger version  Name:	Nov-29-2017 12-28-57.gif Views:	1 Size:	330.7 KB ID:	250597


    as well as screenshots of the Chrome debugger for the 1st and the 2nd clicks. In the debugger, you can see the different branches it takes in handleClick for the 1st and 2nd clicks. You'll also see that the "target" variable is different for both.

    Also, for the first click, I can tell from a debugger breakpoint that the row has already jumped by the time handleMouseUp is called.

    I'm using the latest Smartclient ("v11.1p_2017-11-29/LGPL Deployment")

    This problem occurs in:
    Chrome (on macOS): Version 62.0.3202.94 (Official Build) (64-bit)
    Safari Version 11.0.1 (12604.3.5.1.1)
    IE 11.962

    Problem does not occur in Firefox: 57.0 (64-bit)





    First click:
    Click image for larger version  Name:	1stClick.png Views:	1 Size:	430.3 KB ID:	250596

    2nd click:
    Click image for larger version  Name:	2ndClick.png Views:	2 Size:	461.7 KB ID:	250598
    Attached Files

    #2
    Oh, and I'll bet your log would be helpful. Here are the entries I see from the moment I click on the expansion caret (the first time when it doesn't close). I've pasted a truncated log and I've attached a log with all set to debug (I had to snip out quite a bit in order for it to be under 35 kb).



    13:47:04.376:MDN2:INFO:EventHandler:Target Canvas for event 'mousedown': [GridBody ID:details_body]
    13:47:04.381:MDN2:DEBUG:EventHandler:Bubbling event 'prepareForDragging', target '[GridBody ID:details_body]' has handler: Canvas.prepareForDragging()
    13:47:04.382:MDN2:DEBUG:EventHandler:Bubbling event 'prepareForDragging', target '[PfeListGrid ID:details]' has handler: Canvas.prepareForDragging()
    13:47:04.382:MDN2:DEBUG:EventHandler:Bubbling event 'prepareForDragging', target '[VLayout ID:isc_VLayout_1]' has handler: Canvas.prepareForDragging()
    13:47:04.382:MDN2:DEBUG:EventHandler:Bubbling event 'prepareForDragging', target '[VLayout ID:isc_VLayout_2]' has handler: Canvas.prepareForDragging()
    13:47:04.382:MDN2:DEBUG:EventHandler:Bubbling event 'prepareForDragging', target '[VStack ID:isc_VStack_1]' has handler: Canvas.prepareForDragging()
    13:47:04.382:MDN2:DEBUG:EventHandler:Bubbling event 'prepareForDragging', target '[VStack ID:mainStack]' has handler: Canvas.prepareForDragging()
    13:47:04.382:MDN2:DEBUG:EventHandler:Event 'prepareForDragging' bubbled to top
    13:47:04.382:MDN2:DEBUG:EventHandler:Event 'mouseDown' bubbled to top
    13:47:04.470:MUP8:INFO:EventHandler:Target Canvas for event 'mouseup': [VLayout ID:details_expansionLayout_isc_OID_33]
    13:47:04.471:MUP8:DEBUG:EventHandler:Event 'mouseUp' bubbled to top
    13:47:13.639:MMV0:DEBUG:EventHandler:mousing out of [GridBody ID:details_body] mousing over [VLayout ID:details_expansionLayout_isc_OID_33]
    13:47:13.645:MMV2:DEBUG:EventHandler:mousing out of [VLayout ID:details_expansionLayout_isc_OID_33] mousing over [VStack ID:isc_VStack_1]
    13:47:13.657:TMR3:INFO:scrolling:details_body:Drawn size: 1514 by 2810, specified: 1514 by 2810, scrollbar state:
    13:47:13.663:MMV5:DEBUG:EventHandler:mousing out of [VStack ID:isc_VStack_1] mousing over [VStack ID:mainStack]
    Attached Files

    Comment


      #3
      Just a note that we're ignoring this for now, as the test case in the other thread has multiple usage issues. If a test case is produced which reproduces this problem and has no usage issues, please post to this thread again.

      Comment


        #4
        Since I found test cases for you based on your own showcase for both other issues I wrote up, I assume that the problem I'm describing here is unrelated. With this in mind, I started from my production code and deleted everything I could and the problem still persists, I can replicate the problem in 2 different server environments (grails and create-react-app) but I can't recreate it in your showcase. My guess is that the reason is that my "details" element is not the root of the page when I'm in your showcase, so I've attached a .html as a standalone example for you to evaluate. AFAIK, this code has no "usage issues".

        To reproduce:
        1) Open in a smallish window (enough that there's a scrollbar when the expansion is open)
        2) open first row's expansion
        3) scroll down and click the "Add Step" button
        4) scroll back up the the top of the page
        5) click the "close expansion" caret

        What I see: the window's scroll bar jumps to align with the top of the row but the expansion does not close

        What I expect: I don't care so much where the window scrolls to, but I expect the expansion to close on the first click

        Please take a look and help me figure out how I can fix this! Thanks.

        Attached Files

        Comment


          #5
          We've made a change to address this behavior, where the cell scrolls away from the mouse before the click is registered.

          Please retest with a build December 7 or later.

          Comment


            #6
            Thanks, this is working in my production code.

            Comment

            Working...
            X