Material-UI: Uncaught TypeError при переключении между двумя компонентами Drawer

Question

Примечание: я использую material-ui 3.3.0

Я ищу, чтобы создать два <Drawer> компонента на странице.Первый появляется слева, другой справа.Два <Button> компонента находятся в <AppBar> и используются для переключения каждого ящика соответственно.

Это все работает нормально, однако, когда rightDrawer открыт и нажата кнопка для leftDrawer (настройка leftOpen:true и rightOpen:false), я получаю следующую ошибку:

Uncaught TypeError: Cannot read property 'removeAttribute' of null
  at ariaHidden (manageAriaHidden.js:28)
  at ModalManager.remove (ModalManager.js:188)
  at Modal._this.handleClose (Modal.js:145)
  at Modal.componentDidUpdate (Modal.js:221)
  at commitLifeCycles (react-dom.development.js:14369)
  at commitAllLifeCycles (react-dom.development.js:15462)
  at HTMLUnknownElement.callCallback (react-dom.development.js:100)
  at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
  at invokeGuardedCallback (react-dom.development.js:187)
  at commitRoot (react-dom.development.js:15603)
  at completeRoot (react-dom.development.js:16618)
  at performWorkOnRoot (react-dom.development.js:16563)
  at performWork (react-dom.development.js:16482)
  at performSyncWork (react-dom.development.js:16454)
  at interactiveUpdates$1 (react-dom.development.js:16719)
  at interactiveUpdates (react-dom.development.js:2150)
  at dispatchInteractiveEvent (react-dom.development.js:4532)

Что необычно, так это то, что это не так.

Вот фрагмент кода, демонстрирующий мою проблему:

class Test extends React.Component
{
  constructor(props)
  {
    super(props);

    this.state = {
      leftOpen: false,
      rightOpen: false
    }

    this.toggleLeftPanel = () => {
      this.setState({
        leftOpen: !this.state.leftOpen, 
        rightOpen: false
      });
    }

    this.toggleRightPanel = () => {
      this.setState({
        rightOpen: !this.state.rightOpen,
        leftOpen: false
      });
    }
  }

  render()
  {
    return (
      <React.Fragment>
        {this.AppBar}
        {this.getDrawer(this.state.leftOpen, 'left')}
        {this.getDrawer(this.state.rightOpen, 'right')}
      </React.Fragment>
    )
  }

  get AppBar()
  {
    return (
      <AppBar position='relative' color='primary' style={{height: 64, zIndex: 9999}}>
        <Toolbar>
          {this.getButton(this.state.leftOpen ? 'flat' : 'raised', this.toggleLeftPanel)}
          <div style={{flexGrow: 1}}/>
          {this.getButton(this.state.rightOpen ? 'flat' : 'raised', this.toggleRightPanel)}
        </Toolbar>
      </AppBar>
    );
  }

  getButton(variant, onClick)
  {
    return (
      <Button variant={variant} onClick={onClick}>
        {"open"}
      </Button>
    )
  }

  getDrawer(isOpen, anchor)
  {
    return (
      <Drawer open={isOpen} anchor={anchor}>
        <div style={{width: 100}}/>
      </Drawer>
    );
  }
}

Я попытался установитьзадержка (через setTimeout) между моментом, когда «тумблер» включает одну панель, и выключает другую, чтобы посмотреть, обойдёт ли это проблему ... но безрезультатно.

Answer 1

Похоже, что это актуальная проблема в версии 3.3.0, решение, по-видимому, состоит в том, чтобы откатиться до @ material-ui / core @ 3.2.2 и версии, блокирующей пакет. Json

npm install @material-ui/core@3.2.2

РЕДАКТИРОВАТЬ: кажется, исправлено в обновлении 3.3.2, и вы должны быть в порядке!