it('should render the content into the portal', () => {
wrapper.setProps({ open: true });
const portalLayer = wrapper
.find('Portal')
.instance()
.getMountNode();
const container = document.getElementById('container');
const heading = document.getElementById('heading');
if (!container || !heading) {
throw new Error('missing element');
}
assert.strictEqual(
container.tagName.toLowerCase(),
'div',
'should have the element in the DOM',
);
assert.strictEqual(heading.tagName.toLowerCase(), 'h1', 'should have the element in the DOM');
assert.strictEqual(contains(portalLayer, container), true, 'should be in the portal');
assert.strictEqual(contains(portalLayer, heading), true, 'should be in the portal');
const container2 = document.getElementById('container');
if (!container2) {
throw new Error('missing container');
}
assert.strictEqual(
container2.getAttribute('role'),
'document',
'should add the document role',
);
assert.strictEqual(container2.getAttribute('tabindex'), '-1', 'should add a -1 tab-index');
});
_click: _.ifNotDisabled(function (e) {
var wrapper = this.refs.filterWrapper;
if (!this.props.filter || !this.props.open) this.toggle();else if (!contains(compat.findDOMNode(wrapper), e.target)) this.close();
this.notify('onClick', e);
}),
handleKeyDown = event => {
const list = ReactDOM.findDOMNode(this.list);
const key = keycode(event);
const currentFocus = activeElement(ownerDocument(list));
if (
(key === 'up' || key === 'down') &&
(!currentFocus || (currentFocus && !contains(list, currentFocus)))
) {
if (this.selectedItem) {
ReactDOM.findDOMNode(this.selectedItem).focus();
} else {
list.firstChild.focus();
}
} else if (key === 'down') {
event.preventDefault();
if (currentFocus.nextElementSibling) {
currentFocus.nextElementSibling.focus();
}
} else if (key === 'up') {
event.preventDefault();
if (currentFocus.previousElementSibling) {
currentFocus.previousElementSibling.focus();
}
}
if (this.props.onKeyDown) {
this.props.onKeyDown(event, key);
}
};
componentWillUpdate(nextProps) {
if (!nextProps.open && this.props.open) {
this._focusInDropdown = contains(
ReactDOM.findDOMNode(this.menu), activeElement(document)
);
}
}
// Returns the vertical offset of inner content to anchor the transform on if provided
getContentAnchorOffset(element) {
const { getContentAnchorEl, anchorReference } = this.props;
let contentAnchorOffset = 0;
if (getContentAnchorEl && anchorReference === 'anchorEl') {
const contentAnchorEl = getContentAnchorEl(element);
if (contentAnchorEl && contains(element, contentAnchorEl)) {
const scrollTop = getScrollParent(element, contentAnchorEl);
contentAnchorOffset =
contentAnchorEl.offsetTop + contentAnchorEl.clientHeight / 2 - scrollTop || 0;
}
// != the default value
warning(
this.props.anchorOrigin.vertical === 'top',
[
'Material-UI: you can not change the default `anchorOrigin.vertical` value ',
'when also providing the `getContentAnchorEl` property to the popover component.',
'Only use one of the two properties.',
'Set `getContentAnchorEl` to null or left `anchorOrigin.vertical` unchanged.',
].join('\n'),
);
}
return contentAnchorOffset;
}
_mouseUp(e) {
this._onMouseUpListener && this._onMouseUpListener.remove();
this._onMouseMoveListener && this._onMouseMoveListener.remove();
if (!this._mouseDownData) return;
var inRoot = !this.container || contains(this.container(), e.target);
var bounds = this._selectRect;
var click = this.isClick(e.pageX, e.pageY);
this._mouseDownData = null
if(click && !inRoot) {
return this.emit('reset')
}
if(click && inRoot)
return this.emit('click', { x: e.pageX, y: e.pageY })
// User drag-clicked in the Selectable area
if(!click)
return this.emit('select', bounds)
this.selecting = false;
}
function mouseOverOut(event, callback) {
const target = event.currentTarget;
const related = event.relatedTarget || event.nativeEvent.toElement;
if (!related || related !== target && !contains(target, related)) {
callback(event);
}
}
// Simple implementation of mouseEnter and mouseLeave.
// React's built version is broken: https://github.com/facebook/react/issues/4251
// for cases when the trigger is disabled and mouseOut/Over can cause flicker
// moving from one child element to another.
handleMouseOverOut(handler, e) {
const target = e.currentTarget;
const related = e.relatedTarget || e.nativeEvent.toElement;
if (!related || related !== target && !contains(target, related)) {
handler(e);
}
}
OverlayTrigger.prototype.handleMouseOverOut = function handleMouseOverOut(handler, e, relatedNative) {
var target = e.currentTarget;
var related = e.relatedTarget || e.nativeEvent[relatedNative];
if ((!related || related !== target) && !contains(target, related)) {
handler(e);
}
};
this.blurTimer = setTimeout(() => {
if (this.list) {
const list = ReactDOM.findDOMNode(this.list);
const currentFocus = activeElement(ownerDocument(list));
if (!contains(list, currentFocus)) {
this.resetTabIndex();
}
}
}, 30);
_mouseDown (e) {
var node = this.container()
, collides, offsetData;
// Right clicks
if (
e.which === 3 ||
e.button === 2 ||
!isOverContainer(node, e.clientX, e.clientY)
)
return;
if (!this.globalMouse && node && !contains(node, e.target)) {
let { top, left, bottom, right } = normalizeDistance(0);
offsetData = getBoundsForNode(node);
collides = objectsCollide({
top: offsetData.top - top,
left: offsetData.left - left,
bottom: offsetData.bottom + bottom,
right: offsetData.right + right
},
{ top: e.pageY, left: e.pageX });
if (!collides) return;
}
let result = this.emit('mousedown', this._mouseDownData = {
x: e.pageX,
y: e.pageY,
clientX: e.clientX,
clientY: e.clientY
});
if (result === false)
return;
//e.preventDefault();
this._onMouseUpListener = addEventListener('mouseup', this._mouseUp)
this._onMouseMoveListener = addEventListener('mousemove', this._openSelector)
}
function isOverContainer(container, x, y){
return !container || contains(container, document.elementFromPoint(x, y))
}
}
this.props.onHide();
}
},
checkForFocus() {
if (canUseDom) {
this.lastFocus = activeElement();
}
},
focus() {
let autoFocus = this.props.autoFocus;
let modalContent = this.getDialogElement();
let current = activeElement(ownerDocument(this));
let focusInModal = current && contains(modalContent, current);
if (modalContent && autoFocus && !focusInModal) {
this.lastFocus = current;
if (!modalContent.hasAttribute('tabIndex')){
modalContent.setAttribute('tabIndex', -1);
warning(false,
'The modal content node does not accept focus. ' +
'For the benefit of assistive technologies, the tabIndex of the node is being set to "-1".');
}
modalContent.focus();
}
},