0

Hello I have a SharePoint SPFx react webapp that I've developed.

On one of my components I'm using this Material Table found here: https://material-table.com/#/docs/features/search

My code looks like this:

<MaterialTable
    title=""
    style={{boxShadow: "none"}}
    columns={[
        { title: 'Name', field: 'Name' },
        { title: 'Date', field: 'Date' },               
    ]}
    data={this.state.arrayList}    
    options={{
        filtering: true,
        rowStyle: (data, index) => {
            if (index % 2) {
                return {backgroundColor: "#F8F9FC"};
            }
        }           
    }}
    onRowClick={(event, rowData) => {
        console.log(rowData);
        // Get your id from rowData and use with link.
        window.open(`https://mysite.sharepoint.com/sites/SiteName/SitePages/Home.aspx#/Request/${rowData.id}`, "_self");
        // This refreshes the page after sending to URL
        window.location.reload();
        event.stopPropagation();
    }}                                          
/>

By default the material table has a search box in the table. The way it works is as you type it begins to search, so pressing enter is not needed. However, most users do not know that and will press enter after they type in a string they want to search. What's weird is when you press enter, the SharePoint page refreshes in the Edit Page mode, where the user can then change the page and remove the webapp.

I was looking for a solution, I don't want to remove the users permissions because all users do need edit roles.

Here is the input field that gets generated by Material Table:

<input aria-invalid="false" placeholder="Search" type="text" aria-label="Search" class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd" value=""> 

Should I disable the enter function key on this input through JavaScript? If so how? Or is there a way to allow a user to have edit power but not have access to any toolbars?

3
  • We are using material table in multiple projects without facing this issue & our code looks similar to your code (which looks fine). Btw, where are you passing search: true option in your code? Also, you can pass your custom function for search using onSearchChange property. Oct 21 '21 at 16:30
  • @GaneshSanap thank you for the quick reply. You're saying I should pass search: true or why am I passing it? I'm not passing it currently. And I'm not understanding the second half of your message I'm sorry
    – hisusu32
    Oct 21 '21 at 16:45
  • I just checked the documentation again & search is open by default, no need to pass search: true. In second half of my above message, I was talking about onSearchChange prop in material table. Check this property at all props & see if it helps you somehow. Oct 21 '21 at 16:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.