@ionic/core
Version:
Base components for Ionic
47 lines (46 loc) • 1.79 kB
JavaScript
const cloneMap = new WeakMap();
export const relocateInput = (componentEl, inputEl, shouldRelocate, inputRelativeY = 0) => {
if (cloneMap.has(componentEl) === shouldRelocate) {
return;
}
if (shouldRelocate) {
addClone(componentEl, inputEl, inputRelativeY);
}
else {
removeClone(componentEl, inputEl);
}
};
export const isFocused = (input) => {
return input === input.getRootNode().activeElement;
};
const addClone = (componentEl, inputEl, inputRelativeY) => {
// this allows for the actual input to receive the focus from
// the user's touch event, but before it receives focus, it
// moves the actual input to a location that will not screw
// up the app's layout, and does not allow the native browser
// to attempt to scroll the input into place (messing up headers/footers)
// the cloned input fills the area of where native input should be
// while the native input fakes out the browser by relocating itself
// before it receives the actual focus event
// We hide the focused input (with the visible caret) invisible by making it scale(0),
const parentEl = inputEl.parentNode;
// DOM WRITES
const clonedEl = inputEl.cloneNode(false);
clonedEl.classList.add('cloned-input');
clonedEl.tabIndex = -1;
parentEl.appendChild(clonedEl);
cloneMap.set(componentEl, clonedEl);
const doc = componentEl.ownerDocument;
const tx = doc.dir === 'rtl' ? 9999 : -9999;
componentEl.style.pointerEvents = 'none';
inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0) scale(0)`;
};
const removeClone = (componentEl, inputEl) => {
const clone = cloneMap.get(componentEl);
if (clone) {
cloneMap.delete(componentEl);
clone.remove();
}
componentEl.style.pointerEvents = '';
inputEl.style.transform = '';
};