Barista: [dt-key-value-list] Expanding selection - text displacement

Created on 3 Mar 2020 · 3Comments · Source: dynatrace-oss/barista

Bug Report

Expected Behavior

When text is selected from key-value list component, with "shift+arrow" text selection will be expanded / shrinked.

Current Behavior

It expands selection, but it also moves selected text in key-value pair.

Steps to Reproduce

Example code: https://stackblitz.com/edit/github-bd8pek

Select value in last key-value pair in first KV list
With "shift+ right arrow" expand selection
When it will go out of the KV list some weird thing will happen with selected key-value pair.

Bug exists in Chrome. My version is 80.0.3987.122 (Official Build) (64-bit). I've checked it in Firefox and there it works fine. I'm using Windows 10.

Used Versions:

node: 12.12.6
npm: 4.1.5
typescript: 3.7.5
angular: 9.0.4
@angular/cdk: 8.2.3
@dynatrace/barista-components: 5.2.0

Attachments

example

bug has-pr help wanted

Source

b-wohs

Most helpful comment

Thanks for taking care of it so quickly!

b-wohs on 5 Mar 2020

👍2

All 3 comments

I can confirm that this is reproducible within the stackblitz application.

This will be a fun one to debug.

Firefox seems to work.
Edge seems to work at least in barista-app.
Safari experiences the same problem.

It seems that the wrapper you are setting (especially the display flex) if messing with the styles of the key-value list overflow.

In general, the key value list would be able to display two or more columns. You can pass number of columns you want into the key-value-list component itself (https://barista.dynatrace.com/components/key-value-list/#multiple-columns).

We will need to see why chrome and safari are behaving weirdly in a flex container, though.

tomheller on 4 Mar 2020

It seems that the styling of the key-value-list-item-key::after, with defining a long border to fill the values between the key and the value, is messing it up within a flex container. Somehow the overflow does not work here any more.

https://github.com/dynatrace-oss/barista/blob/ae82a8839e81dc0851a8cacf34b5e8b2e4e8a264/libs/barista-components/key-value-list/src/key-value-list-item.scss#L20-L27

tomheller on 4 Mar 2020

Thanks for taking care of it so quickly!

b-wohs on 5 Mar 2020

👍2

Was this page helpful?

0 / 5 - 0 ratings