Remove pointer events on the entire UI when a dropdown menu is open (#6648)
* Remove pointer events on the entire UI when a dropdown menu is open This prevents operations to change the location of the menu such as scrolling. * Fix mistake from merge
This commit is contained in:
		
							parent
							
								
									4847149b6e
								
							
						
					
					
						commit
						913a38111f
					
				
					 6 changed files with 66 additions and 31 deletions
				
			
		| 
						 | 
				
			
			@ -56,6 +56,7 @@ const messages = defineMessages({
 | 
			
		|||
const mapStateToProps = state => ({
 | 
			
		||||
  isComposing: state.getIn(['compose', 'is_composing']),
 | 
			
		||||
  hasComposingText: state.getIn(['compose', 'text']) !== '',
 | 
			
		||||
  dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const keyMap = {
 | 
			
		||||
| 
						 | 
				
			
			@ -184,6 +185,7 @@ export default class UI extends React.PureComponent {
 | 
			
		|||
    hasComposingText: PropTypes.bool,
 | 
			
		||||
    location: PropTypes.object,
 | 
			
		||||
    intl: PropTypes.object.isRequired,
 | 
			
		||||
    dropdownMenuIsOpen: PropTypes.bool,
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  state = {
 | 
			
		||||
| 
						 | 
				
			
			@ -405,7 +407,7 @@ export default class UI extends React.PureComponent {
 | 
			
		|||
 | 
			
		||||
  render () {
 | 
			
		||||
    const { draggingOver } = this.state;
 | 
			
		||||
    const { children, isComposing, location } = this.props;
 | 
			
		||||
    const { children, isComposing, location, dropdownMenuIsOpen } = this.props;
 | 
			
		||||
 | 
			
		||||
    const handlers = {
 | 
			
		||||
      help: this.handleHotkeyToggleHelp,
 | 
			
		||||
| 
						 | 
				
			
			@ -428,7 +430,7 @@ export default class UI extends React.PureComponent {
 | 
			
		|||
 | 
			
		||||
    return (
 | 
			
		||||
      <HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef}>
 | 
			
		||||
        <div className={classNames('ui', { 'is-composing': isComposing })} ref={this.setRef}>
 | 
			
		||||
        <div className={classNames('ui', { 'is-composing': isComposing })} ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
 | 
			
		||||
          <TabsBar />
 | 
			
		||||
 | 
			
		||||
          <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Reference in a new issue