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

[b-wohs]

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

1. Select value in last key-value pair in first KV list
2. With "shift+ right arrow" expand selection
3. 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

[tomheller]

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]

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.

barista/libs/barista-components/key-value-list/src/key-value-list-item.scss

Lines 20 to 27 in ae82a88

	.dt-key-value-list-item-key::after {
	content: ' ';
	position: absolute;
	left: 0;
	bottom: 9px;
	width: 50000px;
	border-bottom: 1px dotted $gray-300;
	}

[b-wohs]

Thanks for taking care of it so quickly!