Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-7035

Screen jumps when moving value of TwinColumnSelectField

    XMLWordPrintable

Details

    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.

      Checklists

        Acceptance criteria

        Attachments

          1. Grabación de pantalla 2022-04-12 a las 10.38.12.mov
            4.31 MB
            Alejandro Gomez
          2. image-2022-02-17-14-38-14-401.png
            117 kB
            Quach Hao Thien
          3. twinColumnSelectField_screenJumpOnMovingField.webm
            896 kB
            Quach Hao Thien

          Issue Links

            Activity

              People

                jsarf Jaromir Sarf
                jayala Jonathan Ayala
                Nucleus
                Votes:
                0 Vote for this issue
                Watchers:
                8 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Resolved:
                  Work Started:

                  Checklists

                    Bug DoR
                    Task DoD

                    Time Tracking

                      Estimated:
                      Original Estimate - Not Specified
                      Not Specified
                      Remaining:
                      Remaining Estimate - Not Specified
                      Not Specified
                      Logged:
                      Time Spent - 1d 7h
                      1d 7h