How to use @popperjs/core - 6 common examples
To help you get started, we’ve selected a few @popperjs/core examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
discourse / discourse / app / assets / javascripts / discourse / app / lib / autocomplete.js View on Github 
selectedOption = ul.find("li").index(this);
completeTerm(autocompleteOptions[selectedOption]);
if (!options.single) {
me.focus();
}
return false;
});
if (options.appendSelector) {
me.parents(options.appendSelector).append(div);
} else {
me.parent().append(div);
}
if (isInput || options.treatAsTextarea) {
return createPopper(me[0], div[0], {
placement: "bottom-start",
strategy: "fixed",
});
}
let vOffset = 0;
let hOffset = 0;
let pos = me.caretPosition({
pos: completeStart + 1,
});
hOffset = 10;
if (options.treatAsTextarea) {
vOffset = -32;
}setupPopper () {
if (this.popper === undefined) {
this.popper = createPopper(this.$refs.trigger, this.$refs.dropdown, {
placement: 'bottom',
positionFixed: true,
modifiers: {
flip: {
boundariesElement: 'viewport'
},
preventOverflow: {
boundariesElement: 'viewport'
},
autoSizing: {
enabled: true,
fn: (data) => {
const newData = data;
newData.offsets.popper.left = newData.offsets.reference.left;
newData.offsets.popper.right = newData.offsets.reference.right;completeTerm(autocompleteOptions[selectedOption]);
if (!options.single) {
me.focus();
}
return false;
});
if (options.appendSelector) {
me.parents(options.appendSelector).append(div);
} else {
me.parent().append(div);
}
if (isInput || options.treatAsTextarea) {
_autoCompletePopper && _autoCompletePopper.destroy();
_autoCompletePopper = createPopper(me[0], div[0], {
placement: "bottom-start",
strategy: "fixed",
modifiers: [
{
name: "offset",
options: {
offset: [0, 2],
},
},
],
});
return _autoCompletePopper;
}
let vOffset = 0;
let hOffset = 0;`#${this.selectKit.uniqueID}-header`
);
const popper = document.querySelector(
`#${this.selectKit.uniqueID}-body`
);
const inModal = $(this.element).parents("#discourse-modal").length;
let placementStrategy = this.selectKit.options.placementStrategy;
if (!placementStrategy) {
placementStrategy = inModal ? "fixed" : "absolute";
}
const verticalOffset = 3;
this.popper = createPopper(anchor, popper, {
eventsEnabled: false,
strategy: placementStrategy,
placement: this.selectKit.options.placement,
modifiers: [
{
name: "offset",
options: {
offset: [0, verticalOffset],
},
},
{
name: "applySmallScreenOffset",
enabled: window.innerWidth <= 450,
phase: "main",
fn({ state }) {
if (!inModal) {`[data-select-kit-id=${this.selectKit.uniqueID}-header]`
);
const popper = document.querySelector(
`[data-select-kit-id=${this.selectKit.uniqueID}-body]`
);
const inModal = $(this.element).parents("#discourse-modal").length;
let placementStrategy = this.selectKit.options.placementStrategy;
if (!placementStrategy) {
placementStrategy = inModal ? "fixed" : "absolute";
}
const verticalOffset = this.multiSelect ? 0 : 3;
this.popper = createPopper(anchor, popper, {
eventsEnabled: false,
strategy: placementStrategy,
placement: this.selectKit.options.placement,
modifiers: [
{
name: "offset",
options: {
offset: [0, verticalOffset],
},
},
{
name: "applySmallScreenOffset",
enabled: window.innerWidth <= 450,
phase: "main",
fn({ state }) {
if (!inModal) {this.$nextTick(() => {
this.popper = createPopper(this.$el, this.$refs.dropdown, {
placement: this.placement,
modifiers: [
{
name: 'preventOverflow',
options: {
boundariesElement: this.boundary,
},
},
],
})
})
} else if (this.popper) {@popperjs/core
Tooltip and Popover Positioning Engine
