Blinking Modal with Semantic UI React

Question

I'm in the process of applying a modal using the Semantic UI React library. When the modal is triggered it starts flickering and I can't for the life of me figure out why. Any help is appreciated.

Prior to using Semantic I did install Bootstrap but that was removed when Semantic was introduced to this project. Others having the flickering issue resolved it by removing Bootstrap. But because I had previously removed it and the flickering continues, I'm at a loss. I did delete my package-lock.json and ran npm install but that unfortunately didn't fix this issue.

And before I forget, the flickering does happen on both Chrome and FF.

The following path shows how all the files coming into contact with the modal are laid out.

index.js
  |_App.js
      |_Router.js
          |_EventPage.js
              |_Jumbotron.js
                  |_QuizModalMike.js

• Note: this is a group project and not all the code was written by me.

QuizModalMike.js

The code for my "Multiple Modals" modal is a carbon copy of the example found here . Blinking happens even though no changes were applied.

import React, { Component } from 'react'
import { Button, Icon, Modal } from 'semantic-ui-react'

class NestedModal extends Component {
  state = { open: false }

  open = () => this.setState({ open: true })
  close = () => this.setState({ open: false })

  render() {
    const { open } = this.state

    return (
      <Modal
        dimmer={false}
        open={open}
        onOpen={this.open}
        onClose={this.close}
        size='small'
        trigger={<Button primary icon>Proceed <Icon name='right chevron' /></Button>}
      >
        <Modal.Header>Modal #2</Modal.Header>
        <Modal.Content>
          <p>That's everything!</p>
        </Modal.Content>
        <Modal.Actions>
          <Button icon='check' content='All Done' onClick={this.close} />
        </Modal.Actions>
      </Modal>
    )
  }
}

const ModalExampleMultiple = () => (
  <Modal 
    // ------------- fix -------------
    className="scrolling"
    // -------------------------------
    trigger={<Button>Multiple Modals</Button>}>
    <Modal.Header>Modal #1</Modal.Header>
    <Modal.Content image>
      <div className='image'>
        <Icon name='right arrow' />
      </div>
      <Modal.Description>
        <p>We have more to share with you. Follow us along to modal 2</p>
      </Modal.Description>
    </Modal.Content>
    <Modal.Actions>
      <NestedModal />
    </Modal.Actions>
  </Modal>
)

export default ModalExampleMultiple

Jumbotron.js

import React, { Component } from 'react';
import {
  Segment,
  Container,
  Header,
  Button,
  Icon,
  Label,
  Divider
} from 'semantic-ui-react';
import ModalExampleMultiple from './QuizModalMike';


class Jumbotron extends Component {
  state = {};

  render() {
    return (
      <div>
        <Segment
          inverted
          textAlign="center"
          style={{
            minHeight: 700,
            padding: '1em 0em',
            display: 'flex',
            flexDirection: 'column'
          }}
          vertical
        >
          <Segment
            inverted
            style={{
              fontSize: '4em',
              fontWeight: 'normal',
              marginBottom: 0,
              marginTop: '1em',
              alignSelf: 'left'
            }}
          />
          <Container text>
            <Header
              as="h1"
              content="Coffee Meets Code Event"
              inverted
              style={{
                fontSize: '4em',
                fontWeight: 'normal',
                marginBottom: 0,
                marginTop: 0
              }}
            />
            <Header
              as="h2"
              content="Network with developers and technical recruiters from high quality companies."
              inverted
              style={{ fontSize: '1.7em', fontWeight: 'normal' }}
            />
            {/* <QuizModal /> */}
            <ModalExampleMultiple />            
          </Container>
        </Segment>
      </div>
    );
  }
}

export default Jumbotron;

EventPage.js

import React, { Component } from 'react';
import Jumbotron from './Jumbotron';
import Description from './Description';
import Participants from './Participants';

class EventPage extends Component {
  state = {}

  render(){
    return (
      <div>
        <Jumbotron />
        <Description />
        <Participants />
      </div>
    );
  }
}

export default EventPage;

Router.js

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from '../actions';
import Header from './common/Header';
import Landing from './landing/Landing';
import EventPage from './event/EventPage';

class Router extends Component {
  componentDidMount() {
    this.props.fetchUser();
  }

  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <Header />
            <Route exact path="/" component={Landing} />
            {/* Temporary link for development */}
            <Route exact path="/event-page" component={EventPage} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default connect(null, actions)(Router);

App.js

import React, { Component } from 'react';
import Router from './Router';

class App extends Component {
  render() {
    return (
      <div>
        <Router />
      </div>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import 'semantic-ui-css/semantic.min.css';
import reducers from './reducers';

const store = createStore(reducers, {}, applyMiddleware(reduxThunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
, document.getElementById('root'));

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": {
    "/auth/*": {
      "target": "http://localhost:1738"
    },
    "/api/*": {
      "target": "http://localhost:1738"
    }
  },
  "dependencies": {
    "axios": "^0.17.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.1.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "semantic-ui-css": "^2.2.12",
    "semantic-ui-react": "^0.77.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Answer 1

After further investigation it appears that this is an issue on Semantic's end. Luckily there's a PR for this exact issue. In the interim the solution I found was to add className="scrolling" to the variable ModalExampleMultiple within QuizModalMike.js . I edited the file above to reflect this. No more flickering.

Answer 2

I encountered similar issue, by setting className="scrolling" it will work, ut the position of the ModalBox will not be centered.

A better solution which worked for was to sett a fixed height in CSS!

  <Modal style={{height: 300}} dimmer={this.state.dimmer} open={this.state.open} onClose={this.state.close}>
            <Modal.Header>Link to this conclusion</Modal.Header>
            <Modal.Content>
                <Input focus placeholder='Search...' />
                <Modal.Description>
                    <p>Visible to members in the team.</p>
                </Modal.Description>
            </Modal.Content>
        </Modal>
    );
}