react-bootstrap-table2-overlay removes filter values

[mathiaswillburger]

The textFilter input value is removed after data loading is completed, but only when using a loading overlay.

Here are the steps to reproduce the issue:

• The table is set up with remote data fetching
• The overlay property is used to display a spinner
• textFilter() is used on all columns
• When entering a filter value on any column, the overlay spinner is shown correctly and the filtered data is loaded correctly
• However at the end, the filter value in the filter input box is removed

The filter behaves correctly and input values stay as soon as the overlay property is removed again.

[AllenFang]

@mathiaswillburger I will check this out, thanks~

[jeznag]

I can also replicate. See https://jeznag.github.io/react-bootstrap-table2-example/index.html

Code: https://github.com/jeznag/react-bootstrap-table2-example/blob/master/src/DataJunction.js

[AllenFang]

@jeznag yes, it's known issue, and it's a little hard to fix due to it's about a third party library. Right now, before fixing this issue, I will recommend not to use react-bootstrap-table2-overlay, instead custom the overlay by yourself. react-bootstrap-table2 allow you to custom the loading(check this example).

[bl0ck3man]

Thanks. I had some problem too. I resoled it with the link witch @AllenFang gave above.

[Mouerr]

Hi @AllenFang, is this issue still not fixed? Using NoDataIndication is not controllable with loading, so how can i solve this problem? Thanks in advance

[bartmika]

Hi @AllenFang,

I've gotten the same problem but when using "SelectFilter" - the value does not change when using: (1) remote, (2) select filter (3) and overlay.

Would appreciate if you can look at this issue again.

[rodolfomartinez]

+1

[Popov85]

Bug still remains.. it's a pity such a good option((

[basky5]

Is there any solution to this? I am also having the same issue

[kelvi6767]

i've gotten the same issue when i'm type the text on textFilter, its remove the text after filter. but this time i've already remove the overlay. but it seems occur. this is my sample of code. i've remove an overlay. but still the same problem.

`import React, { Component } from 'react'; import { Button, Form, FormGroup, Col, Row, ControlLabel } from 'react-bootstrap'; import '../css/table.css'; import '../css/info_production.css';

//------------- react-bootstrap-table2 ------------------- import BootstrapTable from 'react-bootstrap-table-next'; import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'; import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css'; import paginationFactory from 'react-bootstrap-table2-paginator'; import filterFactory, { textFilter, customFilter, Comparator, FILTER_TYPES } from 'react-bootstrap-table2-filter'; import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css'; //--------- end of react-bootstrap-table2 ------------------ import DatePicker from 'react-date-picker'; import Moment from 'moment'; import { ElementFilter } from '../components/ElementFilter';

const columns = [{ dataField: 'wrhs_nm', text: 'Lokasi Produksi', //filter: textFilter(), headerStyle: (colum, colIndex) => { return { /width: '15%',/ textAlign: 'center' }; }//,style: { width: '200px' } }, { dataField: 'prod_cd', text: 'Kode Produksi', filter: textFilter(), headerStyle: function callback(column, colIndex) { return { /width: '15%',/ textAlign: 'center' }; }//,style: { width: '200px' } }, { dataField: 'prod_bcd', text: 'Barcode', filter: textFilter(), headerStyle: function callback(column, colIndex) { return { /width: '15%',/ textAlign: 'center' }; }//,style: { width: '200px' } }, { dataField: 'prdct_nm', text: 'Nama Barang', //filter: customFilter({ type: FILTER_TYPES.TEXT }), //filterRenderer: (onFilter, column) => <ElementFilter onFilter={onFilter} column={column} />, headerStyle: function callback(column, colIndex) { return { /width: '15%',/ textAlign: 'center' }; }//,style: { width: '200px' } }, { dataField: 'prdct_typ_nm', text: 'Jenis Barang', headerStyle: function callback(column, colIndex) { return { /width: '15%',/ textAlign: 'center' }; }//,style: { width: '200px' } }, { dataField: 'prdct_grd_nm', text: 'Grade', headerStyle: function callback(column, colIndex) { return { /width: '15%',/ textAlign: 'center' }; }//,style: { width: '200px' } } ];

export class info_production extends Component { displayName = info_production.name

constructor(props) {
    super(props);
    this.state = { brcList: [], brcLength: 0, loadingOut: false, loadingIn: false, showTableGrp: false, page: 1, sizePerPage: 10, date1: new Date(), date2: new Date(), tempDate1: new Date(), tempDate2: new Date() };
    /*
     * brcList => is the object of the barcode
     * brcLength => is the length of the barcode (int)
     *
    */
    //this.getInfoProduction();
    this.clickBrc = this.clickBrc.bind(this);

}

shouldComponentUpdate(nextProps, nextState) {
    console.log("info_prod shouldComponentUpdate", nextProps, nextState);
    return true;
}

getInfoProduction() {
    var pageNumb = this.state.page;
    var pageSize = this.state.sizePerPage;
    const __fromdate = this.state.date1;
    const __todate = this.state.date2;
    const __formatfromdate = Moment(__fromdate).format('YYYY-MM-DD');
    const __formattodate = Moment(__todate).format('YYYY-MM-DD') + " 23:59:59.999";
    this.setState({ tempDate1: __fromdate, tempDate2: __todate });

    fetch('api/figo60000/GetInfoBarcode/' + pageNumb + '/' + pageSize + '/' + __formatfromdate + '/' + __formattodate)
        .then(response => response.json())
        .then(mdata => {
            this.setState({ brcList: mdata, loadingOut: false });
            console.log(mdata, "info_production");
        });

    fetch('api/figo60000/Pagingbar/' + __formatfromdate + '/' + __formattodate)
        .then(response => response.json())
        .then(pdata => {
            this.setState({ brcLength: pdata });
            console.log(pdata, "info_production");
        });
}

renderBarcodeTable(brcList: Array<any>, brcLength, page, sizePerPage) {



    const handleTableChange = (type, { page, sizePerPage, filters }) => {
        // control the pagination work
        console.log(sizePerPage, "sizePerPage");
        console.log(page, "page");
        const __date1 = this.state.tempDate1;
        const __date2 = this.state.tempDate2;
        const __formatfromdate = Moment(__date1).format('YYYY-MM-DD');
        const __formattodate = Moment(__date2).format('YYYY-MM-DD') + " 23:59:59.999";
        fetch('api/figo60000/GetInfoBarcode/' + page + '/' + sizePerPage + '/' + __formatfromdate + '/' + __formattodate)
            .then(response => response.json())
            .then(mdata => {
                let result = mdata;
                result = result.filter((row) => {
                    let valid = true;
                    for (const dataField in filters) {
                        const { filterVal, filterType, comparator } = filters[dataField];

                        if (filterType === 'TEXT') {
                            if (comparator === Comparator.LIKE) {
                                valid = row[dataField].toString().indexOf(filterVal) > -1;
                            } else {
                                valid = row[dataField] === filterVal;
                            }
                        }
                        if (!valid) break;
                    }
                    return valid;
                });
                this.setState({ brcList: result, page,  sizePerPage });
                console.log(mdata, "info_production");
            });

    };

    const RemoteTable = ({ /*loading,*/ data, page, sizePerPage, onTableChange, totalSize }) => (
        <div>
            <BootstrapTable
                remote={{ pagination: true, filter: true }}
                // loading={loading}
                classes="table_bootstrap2"
                keyField='__lokasiproduksi'
                data={data}
                columns={columns}
                filter={filterFactory()}
                pagination={paginationFactory({
                    page, sizePerPage, totalSize, sizePerPageList: [{
                        text: '10', value: 10
                    }, {
                        text: '20', value: 20
                    }, {
                        text: 'All', value: brcLength
                    }]
                })}
                onTableChange={onTableChange}
                // overlay={overlayFactory({ spinner: true, styles: { overlay: (base) => ({ ...base, background: 'rgba(0, 0, 0, 0.2)' }) } })}
                striped
                hover
                condensed
                wrapperClasses="table-responsive"

            />
        </div>
    );

    return (
        <div >
            <RemoteTable
                data={brcList}
                page={page}
                sizePerPage={sizePerPage}
                totalSize={brcLength}
                onTableChange={handleTableChange}
            />
        </div>
    );
}


clickBrc() {
    this.setState({ showTableGrp: true, loadingOut: true });
    this.getInfoProduction();
}

onChangeDate1 = (date1) => {
    this.setState({ date1 });
    console.log(date1, "DT1 info_production");
};

onChangeDate2 = (date2) => {
    this.setState({ date2 });
    console.log(date2, "DT2 info_production");
}

render() {

    let tableContent = this.state.loadingOut
        ? <p><em>Loading...</em></p>
        : this.renderBarcodeTable(this.state.brcList, this.state.brcLength, this.state.page, this.state.sizePerPage);

    return (
        <div>
            <h1>Informasi Produksi</h1>
            <p>This component demonstrates fetching data from the server.</p>
            <div className="styling-div">
                <Form inline>
                    <FormGroup controlId="formdate1">
                        <ControlLabel>From </ControlLabel>{' '}
                        <DatePicker
                            onChange={this.onChangeDate1}
                            value={this.state.date1}
                        />
                    </FormGroup>{' '}

                    <FormGroup controlId="formdate2">
                        <ControlLabel>To </ControlLabel>{' '}
                        <DatePicker
                            onChange={this.onChangeDate2}
                            value={this.state.date2}
                        />
                    </FormGroup>
                </Form>
            </div>
            <div className="styling-div">
                <Button bsStyle="primary" onClick={this.clickBrc}>Informasi Produksi</Button>
            </div>
            {
                this.state.showTableGrp
                    ? tableContent
                    : <p />
            }
        </div>

    );
}

}`

can you help? @AllenFang

[adityabaradwaj]

@AllenFang Is this issue going to be fixed? One of the main value adds of react-bootstrap-table2 over react-bootstrap table is the better support for remote table management, but the fact that you can't use overlays with filtering/selection greatly diminishes the usefulness of the remote feature.