Incorrect selection of items in an FMX TListbox (Grid Metropolis UI)

Question

I have met an issue of unproper selection of items in TListBox in my application with a HorzScrollBox in the form. The form has two (or more) TListBox on it. They are placed away from each other so that their absolute left coordinates difference is more than the width of the current device screen width. The error appears in the following sequence of user actions.

1. An item is selected from the left TListBox
2. The HorzScrollBox is scrolled to the right and the second TListBox becomes visible to user and the left one - invisible.
3. The HorzScrollBox is scrolled back to the left.
4. An new item is selected from the left TListBox.

We get the following picture: The new item is selected but the selection stays painted over the position of the previously selected item even if we scroll the box up and down.

It is possible to reproduce the bug in a very simple way.

1. Create a new Grid MetropolisUI Application.
2. Replace the left standard TListBox with a new one (it will be faster).
3. Set the width of the form larger then your screen width
4. Place the second new TListBox inside the HorzScrollBox in such a way so that left and right TListboxes will not be seen simultaneously and selection of items is possible only after scrolling of the HorzScrollBox.
5. Populate them from any sources (ex. two TPrototypeBindSource) and set the ListItemStyle properties of created LinkFieldControlToField to MetropolisUI.

Done. When you run the application you get the issue. The bug appears only when you scroll the HorzScrollBox so that you do not see the second ListBox when you select an item in the first one. Otherwise the items are selected properly (even if you scroll the HorzScrollBox). Here is the resource of the form (except the binary of the style, it needs to be present to reproduce the bug).

object GridViewForm: TGridViewForm
  Left = 0
  Top = 0
  Caption = 'Grid Form'
  ClientHeight = 946
  ClientWidth = 2600
  StyleBook = StyleBook2
  FormFactor.Width = 1280
  FormFactor.Height = 1024
  FormFactor.Devices = [dkDesktop]
  FormFamily = 'Main'
  FullScreen = True
  OnMouseUp = FormMouseUp
  Touch.InteractiveGestures = [igPan]
  OnGesture = FormGesture
  DesignerMobile = False
  DesignerWidth = 0
  DesignerHeight = 0
  DesignerDeviceName = ''
  DesignerOrientation = 0
  DesignerOSVersion = ''
  object MainLayout: TLayout
    Align = alContents
    Height = 921.000000000000000000
    Margins.Top = 25.000000000000000000
    Width = 2600.000000000000000000
    object HorzScrollBox1: THorzScrollBox
      Align = alClient
      Height = 921.000000000000000000
      TabOrder = 0
      Width = 2600.000000000000000000
      object GroupLayout1: TLayout
        Align = alLeft
        Anchors = [akLeft, akTop]
        Height = 905.000000000000000000
        Margins.Left = 110.000000000000000000
        Position.X = 110.000000000000000000
        Width = 540.000000000000000000
        object ListBox4: TListBox
          Align = alClient
          Height = 905.000000000000000000
          StyleLookup = 'collectionlistbox'
          TabOrder = 0
          Width = 540.000000000000000000
          DefaultItemStyles.ItemStyle = ''
          DefaultItemStyles.GroupHeaderStyle = ''
          DefaultItemStyles.GroupFooterStyle = ''
        end
      end
      object GroupLayout2: TLayout
        Align = alLeft
        Anchors = [akLeft, akTop]
        Height = 905.000000000000000000
        Margins.Left = 40.000000000000000000
        Position.X = 690.000000000000000000
        Width = 1225.000000000000000000
      end
      object Layout1: TLayout
        Align = alLeft
        Anchors = [akLeft, akTop]
        Height = 905.000000000000000000
        Margins.Left = 40.000000000000000000
        Margins.Right = 100.000000000000000000
        Position.X = 1955.000000000000000000
        Width = 660.000000000000000000
        object Label1: TLabel
          Align = alTop
          AutoSize = True
          Height = 40.000000000000000000
          Margins.Left = 10.000000000000000000
          Margins.Bottom = 5.000000000000000000
          Position.X = 10.000000000000000000
          StyleLookup = 'pagesubheaderlabel'
          Text = 'Group Title: 4'
          Width = 165.000000000000000000
          WordWrap = False
        end
        object ListBox1: TListBox
          Align = alClient
          Height = 855.000000000000000000
          StyleLookup = 'collectionlistbox'
          TabOrder = 1
          Width = 660.000000000000000000
          DefaultItemStyles.ItemStyle = ''
          DefaultItemStyles.GroupHeaderStyle = ''
          DefaultItemStyles.GroupFooterStyle = ''
        end
      end
    end
  end
  object StyleBook2: TStyleBook
    Left = 632
    Top = 544
    ResourcesBin = {...}
  end
  object PrototypeBindSource1: TPrototypeBindSource
    AutoActivate = True
    AutoPost = False
    FieldDefs = <
      item
        Name = 'ContactBitmapL1'
        FieldType = ftBitmap
        Generator = 'ContactBitmapsL'
        ReadOnly = False
      end
      item
        Name = 'ContactName1'
        Generator = 'ContactNames'
        ReadOnly = False
      end
      item
        Name = 'IntField1'
        FieldType = ftInteger
        Generator = 'Integers'
        ReadOnly = False
      end>
    ScopeMappings = <>
    Left = 1288
    Top = 456
  end
  object BindingsList1: TBindingsList
    Methods = <>
    OutputConverters = <>
    Left = 20
    Top = 5
    object LinkFillControlToField1: TLinkFillControlToField
      Category = 'Quick Bindings'
      Control = ListBox4
      Track = True
      FillDataSource = PrototypeBindSource1
      FillDisplayFieldName = 'ContactName1'
      AutoFill = True
      BufferCount = -1
      AutoBufferCount = False
      ListItemStyle = 'MetropolisUI'
      FillExpressions = <
        item
          SourceMemberName = 'ContactBitmapL1'
          ControlMemberName = 'Icon'
        end
        item
          SourceMemberName = 'IntField1'
          ControlMemberName = 'SubTitle'
        end>
      FillHeaderExpressions = <>
      FillBreakGroups = <>
    end
    object LinkFillControlToField2: TLinkFillControlToField
      Category = 'Quick Bindings'
      Control = ListBox1
      Track = True
      FillDataSource = PrototypeBindSource2
      FillDisplayFieldName = 'ContactName1'
      AutoFill = True
      BufferCount = -1
      AutoBufferCount = False
      ListItemStyle = 'MetropolisUI'
      FillExpressions = <
        item
          SourceMemberName = 'FloatField1'
          ControlMemberName = 'SubTitle'
        end
        item
          SourceMemberName = 'ContactBitmap1'
          ControlMemberName = 'Icon'
        end>
      FillHeaderExpressions = <>
      FillBreakGroups = <>
    end
  end
  object PrototypeBindSource2: TPrototypeBindSource
    AutoActivate = True
    AutoPost = False
    FieldDefs = <
      item
        Name = 'ContactBitmap1'
        FieldType = ftBitmap
        Generator = 'ContactBitmaps'
        ReadOnly = False
      end
      item
        Name = 'ContactName1'
        Generator = 'ContactNames'
        ReadOnly = False
      end
      item
        Name = 'FloatField1'
        FieldType = ftSingle
        Generator = 'Floats'
        ReadOnly = False
      end>
    ScopeMappings = <>
    Left = 1232
    Top = 448
  end
end

Does anyone have any suggestions how to cope with it?

Answer 1

I found an answer by setting ListBox1.CanFocus := false;. In certain cases (rearly) the bug reoccurs.