error: "toLowerCase" of undefined

venuziano commented 3 years ago

Found that "toLowerCase" of undefined error was fixed in v1.7.0, here.

I'm pretty new in this enviroment and not finding v1.7.0 to download, last version i got is always 1.6.11, even with yarn upgrade or yarn add multiselect-react-dropdown@1.7.0.

Any tips how can i get 1.7.0 version?

Quickly Note: in 1.6.11 version the bug still remaining.

srigar commented 3 years ago

Sry latest version is 1.6.11. Can u please add error details here?

venuziano commented 3 years ago

Problem occurs when using selectedValues attribute to preload items when editing an item, e.g an equipment.

Error log:

TypeError: Cannot read property 'toLowerCase' of undefined
    at t.value (index.js:1)
    at index.js:1
    at Array.filter (<anonymous>)
    at t.value (index.js:1)
    at callCallback (react-dom.development.js:12490)
    at commitUpdateQueue (react-dom.development.js:12511)
    at commitLifeCycles (react-dom.development.js:19858)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at dispatchAction (react-dom.development.js:15660)
    at CompanyManager.js:79

User case: Need to add a company with your equipments. I'm using this selector to link equipments to company. When registering a company, with a empty variable in selectValues, got no errors.

Now, when need to edit this company, selectValues has equipments to preload in selector, then the above error occurs.

How multiselect is called:

 <Multiselect
                  id="custom_multiselect"
                  selectedValues={preSelectValuesInMultiSelect}
                  options={availableEquipments}
                  displayValue="mnemonic"
                  placeholder="Selecione as caixas pretas"
                  hidePlaceholder
                  emptyRecordMsg="Nenhum item encontrado"
                  avoidHighlightFirstOption
                  showArrow
                  ref={multiSelectRef}
                  closeIcon="circle"
>

E.g content of availableEquipments variable when registering or editing an item:

[
  {
    createdAt: "2021-02-24T17:44:40.670Z"
    description: "descrição"  
    mnemonic: "X2021000001"
    state: "available"
    updatedAt: "2021-03-30T16:19:07.062Z"
    _id: "6036908808acb1c9c62ddebc"
  },
  {
    createdAt: "2021-02-24T17:45:09.433Z"
    description: ""
    mnemonic: "M2021000002"
    state: "available"
    updatedAt: "2021-03-29T22:37:52.694Z"
    _id: "603690a508acb1c9c62ddebe"
  }  
]

Content of preSelectValuesInMultiSelect variable when editing an item (when register, it's empty).

[{
  createdAt: "2021-02-24T17:44:55.521Z"
  description: "outra descrição"
  mnemonic: "A2021000001"
  state: "hired"
  updatedAt: "2021-03-30T16:19:07.064Z"
  _id: "6036909708acb1c9c62ddebd"
}]

How i'm populating these states:

const [availableEquipments, setAvailableEquipments] = useState([{}]);
const [preSelectValuesInMultiSelect, setPreSelectValuesInMultiSelect] = useState([]);

const getEquipmentsToPreSelectMultiSelect = useCallback(async () => {
    try {
      if (location.state !== undefined) {
        const response =
          await api.get(`blackbox/history/used/in/company?cnpj=${location.state.companyToEdit.cnpj}`);
        setPreSelectValuesInMultiSelect(response.data);
      }
    } catch (err) {
      console.log(err);
    }
  }, [])

const getAvailableEquipments = useCallback(async () => {
    try {
      const response = await api.get('equipments/available/to/use');
      setAvailableEquipments(response.data.ret);
    } catch (err) {
      console.log(err);
    }
  }, [])

 useEffect(() => {
    getAvailableEquipments();
    getEquipmentsToPreSelectMultiSelect();
  }, []);

Using this logic, not always happens the error, sometime it loads the page without problem, but in most of time the error occurs.

Now, if i use the follow logic to add the preload values into options variable's (in my case availableEquipments) when editing an item, the error always happens.

const getAvailableEquipments = useCallback(async () => {
    try {
      let preSelectvalues = [];
      if (location.state !== undefined) {
        preSelectvalues =
          await api.get(`blackbox/history/used/in/company?cnpj=${location.state.companyToEdit.cnpj}`);
        setPreSelectValuesInMultiSelect(preSelectvalues.data);
      }
      const response = await api.get('equipments/available/to/use');
      response.data.ret.push(preSelectvalues);
      setAvailableEquipments(response.data.ret);
    } catch (err) {
      console.log(err);
    }
  }, [])

Idk if it has to do with the time the page took to loads or something like that.

Let me know if you need other informations about.