Skip to content

Fix FloatingAssistant Position #1046

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
google-labs-jules wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Fix FloatingAssistant Position #1046

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7b0db1f
fix(FloatingAssistant): a FloatingAssistant component nao atualizava …
google-labs-jules[bot] Jan 16, 2026
ead935b
fix(FloatingAssistant): a FloatingAssistant component nao atualizava …
google-labs-jules[bot] Jan 16, 2026
26eb7ac
fix(FloatingAssistant): make positioning dynamic and instance-safe
google-labs-jules[bot] Jan 16, 2026
1eef482
fix: FloatingAssistant position not updating on DOM changes
google-labs-jules[bot] Feb 11, 2026
bfb95d5
fix: FloatingAssistant position tracking and DateInput CI test
google-labs-jules[bot] Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 76 additions & 24 deletions src/utils/directives/cdsFloatify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,79 @@
import { createPopper } from '@popperjs/core';

export default (el, biding) => {
let target = '';
let popoverElement = '';
let modifiers = biding.modifiers;
let position = biding.arg;

target = document.querySelector(`[id='${biding.value}']`);
popoverElement = document.querySelector(`[id='${el.id}']`);

createPopper(target, popoverElement, {
placement: position,
modifiers: [
{
name: 'offset',
options: {
offset: [0, -4],
},
},
{
name: 'flip',
enabled: !!modifiers.flip,
},
],
});
let popperInstance = null;
let observer = null;
let scrollHandler = null;
let resizeHandler = null;
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

variáveis globais causam conflitos entre múltiplas instâncias - se houver mais de um FloatingAssistant na página, eles vão sobrescrever as instâncias uns dos outros

armazene no próprio elemento como em cdstip.js:

Suggested change
let popperInstance = null;
let observer = null;
let scrollHandler = null;
let resizeHandler = null;
const CdsFloatify = {
mounted: (el, binding) => {

Copy link
Copy Markdown
Collaborator

@lucasn4s lucasn4s Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jules


const CdsFloatify = {
mounted: (el, binding) => {
const target = document.querySelector(`[id='${binding.value}']`);
const popoverElement = document.querySelector(`[id='${el.id}']`);
const modifiers = binding.modifiers;
const position = binding.arg;

if (target && popoverElement) {
popperInstance = createPopper(target, popoverElement, {
placement: position,
modifiers: [
{
name: 'offset',
options: {
offset: [0, -4],
},
},
{
name: 'flip',
enabled: !!modifiers.flip,
},
],
});

observer = new MutationObserver(() => {
if (popperInstance) {
popperInstance.update();
}
});

observer.observe(document.body, {
childList: true,
subtree: true,
});
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

observar document.body com subtree: true pode causar problemas de performance - o observer vai disparar em TODA mudança do DOM

observe apenas o elemento target ou use { attributes: true, childList: false, subtree: false } se só precisa de mudanças de atributos


scrollHandler = () => {
if (popperInstance) {
popperInstance.update();
}
};

resizeHandler = () => {
if (popperInstance) {
popperInstance.update();
}
};

window.addEventListener('scroll', scrollHandler);
window.addEventListener('resize', resizeHandler);
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

adicione { passive: true } aos listeners para melhor performance de scroll

Suggested change
window.addEventListener('scroll', scrollHandler);
window.addEventListener('resize', resizeHandler);
window.addEventListener('scroll', scrollHandler, { passive: true });
window.addEventListener('resize', resizeHandler, { passive: true });

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

}
},
beforeUnmount: () => {
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

beforeUnmount precisa receber o parâmetro el para acessar a instância específica

Suggested change
beforeUnmount: () => {
beforeUnmount: (el) => {

Copy link
Copy Markdown
Member

@geidsonc geidsonc Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jules

if (popperInstance) {
popperInstance.destroy();
popperInstance = null;
}
if (observer) {
observer.disconnect();
observer = null;
}

if(scrollHandler) {
window.removeEventListener('scroll', scrollHandler);
}

if(resizeHandler) {
window.removeEventListener('resize', resizeHandler);
}
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

precisa remover listeners com as mesmas opções usadas no addEventListener

Suggested change
if(scrollHandler) {
window.removeEventListener('scroll', scrollHandler);
}
if(resizeHandler) {
window.removeEventListener('resize', resizeHandler);
}
if(scrollHandler) {
window.removeEventListener('scroll', scrollHandler, { passive: true });
}
if(resizeHandler) {
window.removeEventListener('resize', resizeHandler, { passive: true });
}

},
};

export default CdsFloatify;