Issue with insert row modal

[edulis8]

Hello, thanks for your attention so far.

I am having an issue with the insert row modal. When I click "New" the modal appears, but the entire screen appears darkened, and as soon as I click on a field on the modal, it disappears again.

I have included a screenshot.

I would also like to only allow the user to enter values for 2 columns (in my case, item# and quantity), not all the columns. After the user enters values for 2 columns, my app will source the other columns dynamically, so they don't need to enter anything else. Is there a way to select which columns the user can enter during a row insertion?

[AllenFang]

HI @edulis8, firstly, the issue of modal being darkened is a known issue, maybe cause by different bootstrap version(there's someone encounter this issue). The second one, we only allow you to configure the editable for column instead of hiding it.

Anyway, this two issue will be solved on v3.0.0 in near future(I'm not very sure what time I can finish it). In v3.0.0, I drop bootstrap modal, and use react-modal so that avoid these annoying bugs and we will allow user to customize the everything in modal, so you can control the which field should be display on modal.

Feel free to discuss with me

Thanks :)

[AllenFang]

BTW, you can check #497

[edulis8]

What bootstrap version should I use do you think?

Eric

On Sep 8, 2016, at 6:05 AM, Allen notifications@github.com wrote:

BTW, you can check #497 https://github.com/AllenFang/react-bootstrap-table/issues/497 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AllenFang/react-bootstrap-table/issues/690#issuecomment-245590599, or mute the thread https://github.com/notifications/unsubscribe-auth/AM5gy8nAn-AFBR9HA9iXWhH9aupkx-aiks5qoAgegaJpZM4J3p2u.

[AllenFang]

@edulis8, try 3.3.2

[hustshawn]

So react-strap-table should depend on bootstrap? or react-bootstrap ?

[AllenFang]

Depend on bootstrap, you should include the bootstrap.js and jquery. Anyway, like I said, I'll remove these dependencies in the v3.0.0

[hustshawn]

@AllenFang Did you fixed in v3.0.0? I cannot find the related update on that branch. Also I investigated via react dev tools, find the modal seems rendered but not appear on the top layer. Can it be the root cause?

[AllenFang]

@hustshawn, I'm still fixing the dependency issue on my local, almost done, but just not yet push back to repo. And currently, I've abandon the native bootstrap modal and switch to react-modal(https://github.com/AllenFang/react-bootstrap-table/blob/v3.0.0-dev/package.json#L68)

find the modal seems rendered but not appear on the top layer. Can it be the root cause?

how about show your code? and did you confirm that you using the branch of v3.0.0-dev in your development env?

[hustshawn]

Created a pull requrest for this issue.

[hustshawn]

@AllenFang My render() method by the way.

 render() {

    const { companies, isLoading } = this.props
    const styles = {
      container: {
        padding: 10,
        display: 'flex',
        alignContent: 'center',
        justifyContent: 'center',
        position: 'relative',
      },
      refresh: {
        position: 'relative',
      },
      propContainer: {
        width: 200,
        overflow: 'hidden',
        margin: '20px auto 0',
      },
      propToggleHeader: {
        margin: '20px auto 10px',
      },
    }

    const onAfterSaveCell =(row, cellName, cellValue) =>{
      console.log("Save cell '"+cellName+"' with value '"+cellValue+"'");
      console.log("Thw whole row :");
      console.log(row);
    }

    function onAfterInsertRow(row) {
      let newRowStr = '';

      for (const prop in row) {
        newRowStr += prop + ': ' + row[prop] + ' \n';
      }
      alert('The new row is:\n ' + newRowStr);
    }

    const onRowSelect = (row, isSelected) => {
      console.log(row);
      console.log("selected: " + isSelected)
    }

    const cellEditProp = {
      mode: "dbclick",
      blurToSave: false,
      afterSaveCell: onAfterSaveCell
    }

    const selectRowProp = {
      mode: "radio",
      clickToSelect: false,
      bgColor: "rgb(238, 193, 213)",
      onSelect: onRowSelect
    };

    const options = {
      afterInsertRow: onAfterInsertRow,
      clearSearch: true,
      defaultSortName: 'id',
      defaultSortOrder: 'desc',
      noDataText: '-',
      onAddRow: (row) => { console.log("on add row")},
      onRowClick: (row) => {console.log("on row click: ", row)},
      paginationSize: 5,
      paginationShowsTotal: true,
      searchDelayTime: 500, // 0.5 second
      sizePerPage: 5,
    }

    if (isLoading) {
      return (
        <RefreshIndicator
          left={10}
          size={50}
          status="loading"
          style={styles.refresh}
          top={0}
        />
      )
    }

    return(
      <Card className="Card-Container" >
        <BootstrapTable 
          data={companies} 
          deleteRow={true} 
          hover={true}
          insertRow={true} 
          options={options} 
          pagination={true} 
          search={true} 
          searchPlaceholder={"Search ..."}
          selectRow={selectRowProp} 
          striped={true} 
          >
          <BsTableHeaderColumn dataField="id" dataSort={true} isKey={true} width="100" >ID</BsTableHeaderColumn>
          <BsTableHeaderColumn dataField="name" dataSort={true} width="200" >Name</BsTableHeaderColumn>
          <BsTableHeaderColumn dataField="code" dataSort={true} >Company Code</BsTableHeaderColumn>
        </BootstrapTable>
      </Card>
    )
  }

[SntsDev]

The problem is that the div with 0.5 opacity is being appended at the end of the body, while the modal is somewhere before (in the table) => That is why the order switches.

If you need a quick solution do the following: Add a CSS rule to hide that last div.

.modal-backdrop.in { display: none !important; }