github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[9.0] [Lens] fix drag and drop ghost after Chrome update to 134 (#213928) (#214127)

Browse source 
# Backport

This will backport the following commits from `main` to `9.0`:
 - https://github.com/elastic/kibana/pull/213928
 - https://github.com/elastic/kibana/pull/215439

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Marta
Bondyra","email":"4283304+mbondyra@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-03-12T11:30:51Z","message":"[Lens]
fix drag and drop ghost after Chrome update to 134 (#213928)\n\n##
Summary\nFixes https://github.com/elastic/kibana/issues/213708\n\nFixes
the ghost display. As @nickofthyme pointed
out\n[here](https://github.com/elastic/kibana/issues/213708#issuecomment-2712076212),\nthe
reason was using inset-inline-start: -10000px for the keyboard\nhandler
that is one of the children of the draggable component. The\nquick fix
is to just move it outside of the html element that is\ndragged.
@markov00 please assesswhere it should be merged
🙏🏼\n\n---------\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"84ae9c98c208957b3efc02c6b00bed8d567d4209","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Discover","release_note:fix","Team:Visualizations","Feature:Lens","backport:prev-minor","backport:prev-major","Feature:UnifiedFieldList","v9.1.0"],"title":"[Lens]
fix drag and drop ghost after Chrome update to
134","number":213928,"url":"https://github.com/elastic/kibana/pull/213928","mergeCommit":{"message":"[Lens]
fix drag and drop ghost after Chrome update to 134 (#213928)\n\n##
Summary\nFixes https://github.com/elastic/kibana/issues/213708\n\nFixes
the ghost display. As @nickofthyme pointed
out\n[here](https://github.com/elastic/kibana/issues/213708#issuecomment-2712076212),\nthe
reason was using inset-inline-start: -10000px for the keyboard\nhandler
that is one of the children of the draggable component. The\nquick fix
is to just move it outside of the html element that is\ndragged.
@markov00 please assesswhere it should be merged
🙏🏼\n\n---------\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"84ae9c98c208957b3efc02c6b00bed8d567d4209"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/213928","number":213928,"mergeCommit":{"message":"[Lens]
fix drag and drop ghost after Chrome update to 134 (#213928)\n\n##
Summary\nFixes https://github.com/elastic/kibana/issues/213708\n\nFixes
the ghost display. As @nickofthyme pointed
out\n[here](https://github.com/elastic/kibana/issues/213708#issuecomment-2712076212),\nthe
reason was using inset-inline-start: -10000px for the keyboard\nhandler
that is one of the children of the draggable component. The\nquick fix
is to just move it outside of the html element that is\ndragged.
@markov00 please assesswhere it should be merged
🙏🏼\n\n---------\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"84ae9c98c208957b3efc02c6b00bed8d567d4209"}}]}]
BACKPORT-->

---------

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
Co-authored-by: Nick Partridge <nicholas.partridge@elastic.co>
This commit is contained in:
Kibana Machine 2025-03-22 02:05:12 +01:00 • committed by GitHub
parent 4c93922f99
commit 6d39f4e844
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 36 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/platform/packages/shared/kbn-dom-drag-drop/src/draggable.tsx
View file

@ -345,20 +345,7 @@ const DraggableImpl = memo(function DraggableImpl({
hoveredDropTarget.dropType !== 'reorder';
return (
<div
className={classNames(className, 'domDraggable', {
'domDraggable_active--move': draggedItemProps && dragType === 'move' && !keyboardMode,
'domDraggable_dragover_keyboard--move': shouldShowGhostImageInstead,
'domDraggable_active--copy': draggedItemProps && dragType === 'copy' && !keyboardMode,
'domDraggable_dragover_keyboard--copy':
keyboardMode && draggedItemProps && hoveredDropTarget,
})}
data-test-subj={dataTestSubj || `${dataTestSubjPrefix}_domDraggable_${value.humanData.label}`}
draggable
onDragEnd={dragEnd}
onDragStart={dragStart}
onMouseDown={removeSelection}
>
<>
<EuiScreenReaderOnly showOnFocus>
<button
aria-label={value.humanData.label}
@ -402,8 +389,25 @@ const DraggableImpl = memo(function DraggableImpl({
onKeyUp={modifierHandlers.onKeyUp}
/>
</EuiScreenReaderOnly>
{children}
</div>
<div
className={classNames(className, 'domDraggable', {
'domDraggable_active--move': draggedItemProps && dragType === 'move' && !keyboardMode,
'domDraggable_dragover_keyboard--move': shouldShowGhostImageInstead,
'domDraggable_active--copy': draggedItemProps && dragType === 'copy' && !keyboardMode,
'domDraggable_dragover_keyboard--copy':
keyboardMode && draggedItemProps && hoveredDropTarget,
})}
data-test-subj={
dataTestSubj || `${dataTestSubjPrefix}_domDraggable_${value.humanData.label}`
}
draggable
onDragEnd={dragEnd}
onDragStart={dragStart}
onMouseDown={removeSelection}
>
{children}
</div>
</>
);
});

2
test/functional/page_objects/discover_page.ts
View file

@ -740,7 +740,7 @@ export class DiscoverPageObject extends FtrService {
* */
public async dragFieldWithKeyboardToTable(fieldName: string) {
const field = await this.find.byCssSelector(
`[data-test-subj="dscFieldListPanelField-${fieldName}"] [data-test-subj="domDragDrop-keyboardHandler"]`
`[data-attr-field="${fieldName}"] [data-test-subj="domDragDrop-keyboardHandler"]`
);
await field.focus();
await this.retry.try(async () => {

2
x-pack/platform/plugins/shared/lens/public/datasources/common/field_item.tsx
View file

@ -246,7 +246,7 @@ export function InnerFieldItem(props: FieldItemProps) {
}, [dataViewField, filters, hideDetails, indexPattern, query, services]);
return (
<li>
<li data-attr-field={field.name}>
<FieldPopover
isOpen={infoIsOpen}
closePopover={closePopover}

20
x-pack/test/functional/page_objects/lens_page.ts
View file

@ -398,7 +398,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
metaKey?: 'shift' | 'alt' | 'ctrl'
) {
const field = await find.byCssSelector(
`[data-test-subj="lnsFieldListPanelField-${fieldName}"] [data-test-subj="lnsDragDrop-keyboardHandler"]`
`[data-attr-field="${fieldName}"] [data-test-subj="lnsDragDrop-keyboardHandler"]`
);
await field.focus();
await retry.try(async () => {
@ -433,17 +433,21 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
metaKey?: 'shift' | 'alt' | 'ctrl'
) {
const elements = await find.allByCssSelector(
`[data-test-subj="${group}"] [data-test-subj="lnsDragDrop-keyboardHandler"]`
`[data-test-subj="${group}"] [data-test-subj="lnsDragDrop-keyboardHandler"]`
);
const el = elements[index];
await el.focus();
await browser.pressKeys(browser.keys.ENTER);
for (let i = 0; i < steps; i++) {
// This needs to be slowed down to avoid flakiness
await common.sleep(200);
await browser.pressKeys(reverse ? browser.keys.LEFT : browser.keys.RIGHT);
}
if (metaKey) {
await this.pressMetaKey(metaKey);
}
await common.sleep(200);
await browser.pressKeys(browser.keys.ENTER);
await this.waitForLensDragDropToFinish();
@ -465,8 +469,12 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
await el.focus();
await browser.pressKeys(browser.keys.ENTER);
for (let i = 0; i < steps; i++) {
// This needs to be slowed down to avoid flakiness
await common.sleep(200);
await browser.pressKeys(reverse ? browser.keys.ARROW_UP : browser.keys.ARROW_DOWN);
}
await common.sleep(200);
await browser.pressKeys(browser.keys.ENTER);
await this.waitForLensDragDropToFinish();
@ -1539,10 +1547,10 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
*/
async assertFocusedField(name: string) {
const input = await find.activeElement();
const fieldAncestor = await input.findByXpath('./../..');
const focusedElementText = await fieldAncestor.getVisibleText();
const dataTestSubj = await fieldAncestor.getAttribute('data-test-subj');
const fieldPopover = await input.findByXpath('./..');
const focusedElementText = await fieldPopover.getVisibleText();
expect(focusedElementText).to.eql(name);
const dataTestSubj = await fieldPopover.getAttribute('data-test-subj');
expect(dataTestSubj).to.eql('lnsFieldListPanelField');
},
@ -1553,7 +1561,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
*/
async assertFocusedDimension(name: string) {
const input = await find.activeElement();
const fieldAncestor = await input.findByXpath('./../../..');
const fieldAncestor = await input.findByXpath('./../..');
const focusedElementText = await fieldAncestor.getVisibleText();
expect(focusedElementText).to.eql(name);
},