[MGNLUI-7035] Screen jumps when moving value of TwinColumnSelectField Created: 14/Feb/22  Updated: 20/Dec/22  Resolved: 08/Dec/22

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: 6.2.16
Fix Version/s: 6.3.0, 6.2.27

Type: Bug Priority: Neutral
Reporter: Jonathan Ayala Assignee: Jaromir Sarf
Resolution: Fixed Votes: 0
Labels: VN-Analysis, css, nucleus, twin-column-field
Σ Remaining Estimate: Not Specified Remaining Estimate: Not Specified
Σ Time Spent: 1d 7h Time Spent: 1d 3h
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Attachments: File Grabación de pantalla 2022-04-12 a las 10.38.12.mov     PNG File image-2022-02-17-14-38-14-401.png     Zip Archive minimal-vaadin-project.zip     File twinColumnSelectField_screenJumpOnMovingField.webm    
Issue Links:
Relates
relates to MGNLUI-7674 TwincolumnSelectField CollapsableComp... Open
causality
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLUI-7646 Implementation Sub-task Completed Jaromir Sarf  
MGNLUI-7647 Code review Sub-task Closed Antonín Juran  
MGNLUI-7648 preintQA Sub-task Closed Antonín Juran  
MGNLUI-7649 QA Sub-task Completed Sang Ngo Huu  
MGNLUI-7659 Backport to 6.2 Sub-task Closed Jaromir Sarf  
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[X]* Steps to reproduce, expected, and actual results filled
[X]* Affected version filled
Release notes required:
Yes
Date of First Response:
Epic Link: Maintenance of vaadin8 framework
Sprint: Nucleus 24, Nucleus 25
Story Points: 3
Team: Nucleus
Work Started:

 Description   

Steps to reproduce

  1. Decorate stories app to add a twin column field as a new block. The existing decoration in /travel-demo-stories-app/decorations/stories-app/apps/stories.yaml can be modified to reproduce this bug as follows:
    subApps:
      editor:
        form:
          properties:
            relatedContent:
              properties:
                tours:
                  label: stories.editor.relatedContent.tours.label
                  $type: jcrMultiValueField
                  buttonSelectAddLabel: stories.editor.relatedContent.tours.add.label
                  field:
                    $type: linkField
                    chooserId: stories-app:chooserTours
                    datasource:
                      $type: jcrDatasource
                      workspace: tours
                    buttonSelectNewLabel: stories.editor.relatedContent.tours.browse.label
                twinSelect:
                  label: Groups
                  $type: twinColSelectField
                  leftColumnCaption: "Available groups"
                  rightColumnCaption: "User is member of"
                  datasource:
                    $type: jcrDatasource
                    workspace: usergroups
                    allowedNodeTypes:
                      - mgnl:group
            blocks:
              blocks:
                - text
                - image
                - video
                - externalLink
                - date
                - tour
                - twinSelect
    permissions:
      roles:
        travel-demo-publisher: travel-demo-publisher
        travel-demo-editor: travel-demo-editor
    
  2. Make use of the new column field by moving values from one column to another

Expected results

Twin column field can be used without any issue

Actual results

Focus is lost and scroll moves in a jump. This is more noticeable in smaller screens (laptop) than in bigger ones, where the jump is lighter.



 Comments   
Comment by Quach Hao Thien [ 18/Feb/22 ]

Steps to reproduce

  1. Install Dx-core-demo-webapp (contains Stories app and Stories demo)
  2. Modify /travel-demo-stories-app/decorations/stories-app/apps/stories.yaml to add a twin column select field. This existing decoration can be modified to reproduce this bug as follows:
    subApps:
      editor:
        form:
          properties:
            relatedContent:
              properties:
                tours:
                  label: stories.editor.relatedContent.tours.label
                  $type: jcrMultiValueField
                  buttonSelectAddLabel: stories.editor.relatedContent.tours.add.label
                  field:
                    $type: linkField
                    chooserId: stories-app:chooserTours
                    datasource:
                      $type: jcrDatasource
                      workspace: tours
                    buttonSelectNewLabel: stories.editor.relatedContent.tours.browse.label
                twinSelect:
                  label: Groups
                  $type: twinColSelectField
                  leftColumnCaption: "Available groups"
                  rightColumnCaption: "User is member of"
                  datasource:
                    $type: jcrDatasource
                    workspace: usergroups
                    allowedNodeTypes:
                      - mgnl:group
            blocks:
              blocks:
                - text
                - image
                - video
                - externalLink
                - date
                - tour
    permissions:
      roles:
        travel-demo-publisher: travel-demo-publisher
        travel-demo-editor: travel-demo-editor
    
  1.  Create new Story, and observe the field locates in Related content 
  2. Make use of the new column field by moving values from one column to another

Expected results

Twin column field does not trigger on focus event to prevent screen jumping

Actual results

Focus is lost and scroll moves in a jump. This is more noticeable in smaller screens (laptop) than in bigger ones, where the jump is lighter.

twinColumnSelectField_screenJumpOnMovingField.webm

Discovery note

  • Change the Step to reproduce, since this decoration is not going to add the twinColumnSelectField as new block, but add to the Related content instead.
  • Add screenshot and video
  • Focus is still on the selected item of the field
  • Verify on Contacts-v8
  • ListBox (source or target) is focused after move item, which cause the screen jumps to focus view: see com.vaadin.client.ui.VTwinColSelect#moveSelectedItems
Comment by Rabie Hayoun [ 04/Mar/22 ]

please create a minimal vaadin project that reproduce the issue so we can pass it to vaadin support

Comment by Roman Kovařík [ 15/Mar/22 ]

Could we describe the interaction steps with the field?
I'm, watching the video but I'm not sure what's going on there, the mouse pointer is somewhere else then the interaction with the twincolumn is happening.
Is it controlled by keyboard or is there a lag in the video (it's pretty hard to follow mouse and keyboard at the same time)?

Comment by Quach Hao Thien [ 15/Mar/22 ]

maybe the unprecise in pixel of my second screen, but all the behaviors in the video were using mouse, I can describe as belows:

  1. Select an item from the left side colum
  2. Click to arrow button move to right
  3. You could see the screen will jump as it try to focus to the field
Comment by Alejandro Gomez [ 12/Apr/22 ]

Dicovery

Created a minimal Vaadin 8 project to reproduce the issue. However, it seems like the bug is not happening. Attached video of the basic behaviour, where we can see that the focus isn't lost and the screen isn't jumping.

Comment by Rabie Hayoun [ 22/Apr/22 ]

agomez please attached the minimal project to this ticket, so someone else can try it again and do the discovery

Comment by Alejandro Gomez [ 25/Apr/22 ]

Attached minimal vaadin project

Generated at Mon Feb 12 09:42:29 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.