cant type inside pop up inputs

[alighali85]

I am trying to add image URL but when clicking on the image symbol ...a popup window open with input fields but none of them accept typing I can't type image URL or even paste inside

thanks

[codeslayer1]

Please share your source code and screenshot of the issue that you are facing.

[alighali85]

Hi, thanks for answering here is the code `import React, { Component } from 'react' import { Form, Col, FormGroup, FormControl,ButtonToolbar, ToggleButtonGroup, ToggleButton, Button } from 'react-bootstrap' import * as firebase from 'firebase' import CKEditor from 'react-ckeditor-component' import ButtonWithIcon from '../elements/ButtonWithIcon'

class AddPage extends Component {

constructor(props) { super(props) this.state= { pageName: '', pageTitle: '', showPage: '', allowSend: false, pageContent: {} } }

componentWillMount = () => { }

handleSubmit = (e) => { const { pageName, pageTitle, showPage, pageContent } = this.state e.preventDefault() const adminAppdatabase = firebase.database() const categoriesData = adminAppdatabase.ref().child('Pages') categoriesData.push({ pageName: pageName, pageTitle: pageTitle, showpage: showPage, pageContent: pageContent }, function(error) { if (error) { console.log('// The write failed...') } else { console.log('// Data saved successfully!') //TO DO: Do something when the request comes back .... } }) console.log('will be redirect to categories') setTimeout(() => { this.props.onFormSent() }, 1000);

}

handleInput = (e) => { const { name, value } = e.target console.log(name + ' '+ value ) this.setState({

})

}

handleCKInput = (evt) => { const newContent = evt.editor.getData() this.setState({ pageContent: newContent }) }

render () {
return (

---

اسم الصفحه اسم العرض العرض عرض في الصفحه الرئيسي عدم العرض في الصفحة الرئيسية

)

} }

export default AddPage``

[alighali85]

in the image url I cant type anything or paste

[codeslayer1]

Are you getting any errors in console? I tried the same code and the url is working perfectly fine for me.

Also, please format the code properly when commenting. Its unreadable at the moment.

[alighali85]

Hi... sorry for the code the editor here didnt pasted it properly .. I still have the issue there is no errors related to the CK component in the console.. all the input fields are not editable !

[alighali85]

I made some research about the issue it seems like its more relates to the modal i use, so I use the ckeditor inside bootstrap modal. this way the input fields not editable(though I dont know why)

thanks for welling to help!

[codeslayer1]

Yes. This issue is occurring when using CKEditor inside Bootstrap modal. I researched this issue and it happens due to some naming conflict in CKeditor and bootstrap focusin event (Ref this - https://dev.ckeditor.com/ticket/14342#comment:2). This is an issue specific to Bootstrap and not Ckeditor/React-Ckeditor.

Here is a fix that I tried. You need to remove the tabindex attribute from Bootstrap modal. See if it works for you.

First make a function to remove the attribute. Then call this function in your Modal onEntered event.

modalCkeditorHandling() {
    var modal = document.getElementById('my-modal');

    if(modal != undefined){
      modal.removeAttribute('tabindex');
    }
};

<Modal id="my-modal"
             onEntered={this.modalCkeditorHandling}
             >
</Modal>

[codeslayer1]

Closing this due to no activity.

[FACOLOMBANI]

I have the same issue when using material-ui modal.

[FACOLOMBANI]

this was my fix but i think its not appropriate to use this type of code when your are using react. This occurs apparently when using the CkEditor inside of any modal, bootstrap or other.

onEntered = () => {
        const canteenModal = document.getElementById('CanteenModal');
        if (canteenModal && canteenModal.childNodes) {
            canteenModal.childNodes.forEach(i => {
                if (i.tabIndex) i.removeAttribute('tabIndex');
            });
        }
    };

<Dialog open={open} maxWidth={false} onEntered={this.onEntered} id="CanteenModal">...</Dialog>