maybeScrollItemIntoView: function maybeScrollItemIntoView() {
if (this.state.isOpen === true && this.state.highlightedIndex !== null) {
var itemNode = this.refs['item-' + this.state.highlightedIndex];
var menuNode = this.refs.menu;
scrollIntoView(itemNode, menuNode, { onlyScrollIfNeeded: true });
}
},
this.props.setTimeout( () => {
// We need a generic way to access the panel's container
// eslint-disable-next-line react/no-find-dom-node
scrollIntoView( findDOMNode( this.panels[ panel ] ), this.inserterResults.current, {
alignWithTop: true,
} );
} );
$('#scrollIntoView')[0].onclick = () => {
scrollIntoView($('#ex1')[0], $('#container')[0], {
alignWithLeft: transformValue($('#alignWithLeft').val()),
alignWithTop: transformValue($('#alignWithTop').val()),
allowHorizontalScroll: transformValue($('#allowHorizontalScroll').val()),
onlyScrollIfNeeded: transformValue($('#onlyScrollIfNeeded').val()),
offsetTop: parseInt($('#offsetTop').val()) || 0,
offsetLeft: parseInt($('#offsetLeft').val()) || 0,
});
};
maybeScrollItemIntoView() {
if (this.state.isOpen === true && this.state.highlightedIndex !== null) {
const itemNode = this.refs[`item-${this.state.highlightedIndex}`];
const menuNode = this.refs.menu;
if (itemNode) {
scrollIntoView(
findDOMNode(itemNode),
findDOMNode(menuNode),
{ onlyScrollIfNeeded: true },
);
}
}
}
componentDidUpdate() {
// only have to worry about scrolling selected suggestion into view
// when already expanded
if ( this.props.selectedIndex > -1 && this.props.scrollIntoView ) {
this.scrollingIntoView = true;
scrollIntoView( this.list.children[ this.props.selectedIndex ], this.list, {
onlyScrollIfNeeded: true,
} );
setTimeout( () => {
this.scrollingIntoView = false;
}, 100 );
}
}
componentDidUpdate() {
const { showSuggestions, selectedSuggestion } = this.state;
// only have to worry about scrolling selected suggestion into view
// when already expanded
if ( showSuggestions && selectedSuggestion !== null && ! this.scrollingIntoView ) {
this.scrollingIntoView = true;
scrollIntoView( this.suggestionNodes[ selectedSuggestion ], this.listNode, {
onlyScrollIfNeeded: true,
} );
setTimeout( () => {
this.scrollingIntoView = false;
}, 100 );
}
}
this.scrollActiveItemToView = function () {
// scroll into view
var itemComponent = findDOMNode(_this3.firstActiveItem);
var props = _this3.props;
if (itemComponent) {
var scrollIntoViewOpts = {
onlyScrollIfNeeded: true
};
if ((!props.value || props.value.length === 0) && props.firstActiveValue) {
scrollIntoViewOpts.alignWithTop = true;
}
scrollIntoView(itemComponent, findDOMNode(_this3.menuRef), scrollIntoViewOpts);
}
};
/**
* Ensures that if a multi-selection exists, the extent of the selection is
* visible within the nearest scrollable container.
*
* @return {void}
*/
scrollIntoView() {
const { extentClientId } = this.props;
if ( ! extentClientId ) {
return;
}
const extentNode = getBlockDOMNode( extentClientId );
if ( ! extentNode ) {
return;
}
const scrollContainer = getScrollContainer( extentNode );
// If there's no scroll container, it follows that there's no scrollbar
// and thus there's no need to try to scroll into view.
if ( ! scrollContainer ) {
return;
}
scrollIntoView( extentNode, scrollContainer, {
onlyScrollIfNeeded: true,
} );
}
_this.rafInstance = raf(function () {
scrollIntoView(itemComponent, findDOMNode(_this.menuRef), scrollIntoViewOpts);
});
if (this.state.isOpen && this._performAutoCompleteOnUpdate) {
this._performAutoCompleteOnUpdate = false
this.maybeAutoCompleteText()
}
this.maybeScrollItemIntoView()
},
maybeScrollItemIntoView () {
if (this.state.isOpen === true && this.state.highlightedIndex !== null) {
var itemNode = this.refs[`item-${this.state.highlightedIndex}`]
var menuNode = this.refs.menu
scrollIntoView(
findDOMNode(itemNode),
findDOMNode(menuNode),
{ onlyScrollIfNeeded: true }
)
}
},
handleKeyDown (event) {
if (this.keyDownHandlers[event.key])
this.keyDownHandlers[event.key].call(this, event)
else {
const { selectionStart, value } = event.target
if (value === this.props.value)
// Nothing changed, no need to do anything. This also prevents
// our workaround below from nuking user-made selections
return
this.setState({
if (this.state.isOpen === true && prevState.isOpen === false)
this.setMenuPositions()
if (this.state.isOpen && this._performAutoCompleteOnUpdate) {
this._performAutoCompleteOnUpdate = false
this.maybeAutoCompleteText()
}
this.maybeScrollItemIntoView()
},
maybeScrollItemIntoView () {
if (this.state.isOpen === true && this.state.highlightedIndex !== null) {
var itemNode = this.refs[`item-${this.state.highlightedIndex}`]
var menuNode = this.refs.menu
scrollIntoView(itemNode, menuNode, { onlyScrollIfNeeded: true })
}
},
handleKeyDown (event) {
if (this.keyDownHandlers[event.key])
this.keyDownHandlers[event.key].call(this, event)
else {
const { selectionStart, value } = event.target
if (value === this.state.value)
// Nothing changed, no need to do anything. This also prevents
// our workaround below from nuking user-made selections
return
this.setState({
highlightedIndex: null,
isOpen: true