Friday, April 26, 2019

Which React Dorpdown or Selection component you should use in SharePoint framework SPFx React project?

When we use Office Fabric UI Dropdown component, we run into a issue that the value in the SharePoint list item value could not be displayed. As a result, we are looking for alternative for multiple dropdown component. Here is the list of the React dowpdown components we evaluated and my suggestion.

1. React-dropdown is a good candidate and it's extremely easy to configured. However, the issue is this is only support single selection. If you need multiple selection, this is not for you.

2. React-muti-select is another good example. However, the selected options will be displayed in another window as below picture that makes the UI not friendly.



3. Multi-select-react seems to be a nice component. However, there is an error when running this with SPFx React. This might be the version compatibility issue.

Error - [tsc] C:/Harry/Projects/Pubs/POC/Support/LookUp/node_modules/typescript/lib/tsc.js:55776
                throw e;
                ^
Error: Debug Failure.
    at typeToString (C:/Harry/Projects/Pubs/POC/Support/LookUp/node_modules/typescript/lib/tsc.js:23526:22)
    at reportRelationError (C:/Harry/Projects/Pubs/POC/Support/LookUp/node_modules/typescript/lib/tsc.js:28855:34)
    at isRelatedTo (C:/Harry/Projects/Pubs/POC/Support/LookUp/node_modules/typescript/lib/tsc.js:28972:21)
    at propertiesRelatedTo (C:/Harry/Projects/Pubs/POC/Support/LookUp/node_modules/typescript/lib/tsc.js:29382:43)
    at structuredTypeRelatedTo (C:/Harry/Projects/Pubs/POC/Support/LookUp/node_modules/typescript/lib/tsc.js:29275:38)
    at recursiveTypeRelatedTo (C:/Harry/Projects/Pubs/POC/Support/LookUp/node_modules/typescript/lib/tsc.js:29172:53) 

4. React-select-box also has an error as below.


sp-webpart-workbench-assembly_en-us_1a783b02ca664f8c65a409008ba8cbb9.js:204 Uncaught (in promise) Invariant Violation: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.


5. One of the best options is from Semantic-Org. This package includes many components and css. There are many examples to use this in React project. Here is the dropdown component.


The issue I'm facing is the instructions to incorporate in the SPFx project. I have difficult to install and use the component. The css does not seem to play well with other React component. I would like to revisit when I have time.

6. The final one is the react-select component. The installation and example given are simple. One issue is the multiple selection is not user friendly. User has to select one option at a time unlike other React Drowdown you can click multiple values at one time.



It only take about 10 minutes and here is the dropdown I put together in a POC project. I've verified that this component indeed could display the SharePoint values from list item. Hope I can replace this component after Microsoft resolved the Office Fabric UI dropdown bug.


No comments:

Post a Comment