React-Select breaking CoreUi functionalities

Question

I'm using @coreui/react with React-select the problem is that returning a Select element in scoped slots breaks core-ui functionalities like searching & sorting

However it works fine if when returning a <label> or a <p> with text Ex: <label>{item.status}</label>

Question

Why is Select component breaking the functionality ?

Any workaround / efforts are highly appreciated

Note

I have tried workarounds like <p hidden >{item.status}</p> and then rendering the Select component but it does not work

import React from "react";
import Select from "react-select";
import { CDataTable } from "@coreui/react";

...

  <CDataTable
    bordered
    clickableRows
    fields={fields}
    hover
    items={[...employeeData]}
    itemsPerPage={10}
    itemsPerPageSelect
    loading={tableLoader}
    onRowClick={(e) => rowSelectHandler(e)}
    pagination
    size="sm"
    sorter={{ resetable: true }}
    striped
    tableFilter={{
      placeholder: "Filter",
      label: "Search:",
    }}
    scopedSlots={{
      status: (item, index) => (
        <td style={{ width: "13%" }}>
          <Select
            id={item.index}
            placeholder="Select Status"
            isSearchable={false}
            className="basic-single"
            onChange={(e) => selectChangeHandler(e.value, index)}
            classNamePrefix="select"
            defaultValue={{
              label: item.status,
              value: item.status,
              color: getBadge(item.status),
            }}
            // name="color"
            // inputValue={item.status}
            options={[
              {
                value: "ACTIVE",
                label: "ACTIVE",
                color: "#2eb85c",
              },
              {
                value: "DEACTIVE",
                label: "DEACTIVE",
                color: "#e55353",
              },
            ]}
            styles={colourStyles}
          />
        </td>
      ),
    }}
  />
...

Edit

Accepting answers with antd-select also if it works with coreui-datatable

Lobectomy

Can you add more info like Error Message, Parent Component or JSfiddle code link to understand better ? – Advisee

@Advisee there is no error message , Simply put the React Select is not getting filtered or sorted by core UI for some odd reason. – Lobectomy

Did you try putting plan Select in place of React-select ? – Advisee

@Advisee yes i tried putting plain select , it worked perfectly with plain select , However due to styling restrictions i want to use react-select – Lobectomy

if you can place your code in codesandbox.io will help to understand better – Advisee

@Advisee i tried doing that :( but some dependencies could not get installed so i quit :( – Lobectomy

The react-select component is self closing, which (for me anyway) has been a source of issues in the past when I've tried to render inside something like a table cell. Have you tried encapsulating the react-select in fragments? <> <select .... /> </> – Enslave

@Enslave this does not work – Lobectomy

@Lobectomy same problems when encapsulating your select inside fragments? Do you have any error logs or anything? – Enslave

@Enslave there are no error logs.. functionality is breaking for example pagination status is static it does not change on page change that column stays the same sorting is not working on that column searching is not working either – Lobectomy

@Lobectomy what do your pagination or searching functions look like? Can you post those? What if instead of using the react-select, you create your own component using a regular select, which you indicated works, and then apply a custom style to it? Obviously the ideal solution would be to make react-select work if you're using it elsewhere, but custom styling in one specific location isn't the worst of workarounds until you can look more closely at the functions. – Enslave

@Enslave Unfortunately styling regular select components is not possible , Also writing my own custom select component is beyond me I think..... – Lobectomy

@Lobectomy Does the answer below help you? – Calvinna

Answer 1

I managed to put together a codesandbox and also was able to find the reason it does not work, and fix it.

The Problem:

https://codesandbox.io/s/twilight-butterfly-itppu?file=/src/App.js

I guess this Select component has some internal state initialised with defaultValue. Then the table when sorting changes the index(it sorts the data array) and you are using the index as id, so react reuses the same element but is unable to update the value because you are only providing defaultValue.

The Solution(s):

basically you should use value instead of defaultValue in the Select.

https://codesandbox.io/s/goofy-browser-b02xb?file=/src/App.js

OR

add a key based on some unique property of the item (not the index in the array).

https://codesandbox.io/s/zen-sky-56vly?file=/src/App.js

Pirri