Search code examples
reactjsmodal-dialogstatematerializeonchange

React-Materialize Modal : any key will close the modal unexpectedly


Description I have a react-materialize modal with text inputs In the options, I have set dismissible to false

Actual behavior: When I type text inside or anything, any key will close the modal.

Expected behavior: I want to close the modal only when the button close is clicked or the button submit is clicked Do you know why any key will close the modal ? I think it is because of the OnChange on my inputs.

Thank you

Versions react-materialize: 3.5.10 materialize-css: 1.0.0 react: 16.12.0

<Form>
  <Modal actions={[ <div>
    <Button className="blue darken-4" size="sm" onClick={()=> this.closeModal()}>Annuler</Button>{' '}
    <Button className="blue darken-4" size="sm" onClick={()=> this.addProd(producerName, producerShare)} >Enregistrer dans la blockchain</Button>
    </div>

    ]} bottomSheet={false} fixedFooter={false} header="Ajouter un coproducteur" id="Modal-0" open={false} options={{ dismissible: false, endingTop: '10%', inDuration: 250, onCloseEnd: null, onCloseStart: null, onOpenEnd: null, onOpenStart: null, opacity:
    0.5, outDuration: 250, preventScrolling: true, startingTop: '4%' }} trigger={
    <Button className="blue darken-4">Ajouter un coproducteur</Button>} >
    <p>

      Veuillez saisir le nom du coproducteur et le pourcentage de ses parts dans le projet
    </p>
    <br></br>


    <TextInput id="producerName" placeholder="Nom" onChange={adresse=> this.setState({producerName: adresse.target.value})} />{' '}
      <br></br>
      <TextInput id="producerShare" placeholder="Part Producteur" onChange={adresse=> this.setState({producerShare: adresse.target.value})} />
        <br></br>
  </Modal>
</Form>

Solution

  • Solution is to remove open={false}