Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warning on disabled edit buttons #1049

Closed
avkonst opened this issue Aug 29, 2019 · 16 comments
Closed

Warning on disabled edit buttons #1049

avkonst opened this issue Aug 29, 2019 · 16 comments

Comments

@avkonst
Copy link

avkonst commented Aug 29, 2019

Describe the bug
If a specific row has got Edit/Delete actions disabled, there is a warning in console:

index.js:1375 Warning: Material-UI: you are providing a disabled `button` child to the Tooltip component.
A disabled element does not fire events.
Tooltip needs to listen to the child element's events to display the title.

Place a `div` container on top of the element. 
    in Tooltip (created by WithStyles(Tooltip))
    in WithStyles(Tooltip) (created by MTableAction)
    in MTableAction (created by MTableActions)
    in MTableActions (created by MTableBodyRow)
    in MTableBodyRow (at TableGrid.tsx:258)

Expected behavior
No warning in the console

The reproducer:

    <MaterialTable
        columns={[
            {
                field: 'id',
                title: 'ID'
            }
        ]}
        data={[{ id: 'a' }]}
        editable={{
            isEditable: rowData => false,
            onRowUpdate: (newData, oldData) => Promise.resolve()
        }}
    />
@aglt93
Copy link

aglt93 commented Aug 29, 2019

I'm having a similar warning. Probably corresponds to the same issue.

backend.js:1 Warning: Material-UI: you are providing a disabled button child to the Tooltip component.
A disabled element does not fire events.
Tooltip needs to listen to the child element's events to display the title.

Place a div container on top of the element.

@mstke
Copy link

mstke commented Sep 2, 2019

If you need a quick workaround this problem, you can create an Action that appears under condition with the hidden prop.

const actions={
  [
    rowData => ({
      icon: 'delete',
      isFreeAction: false,
      tooltip: 'Delete User',
      hidden: !rowData.deletable
      onClick:() => {...}
      })
  ]}

See the Conditionals Actions Example for more info

@oze4
Copy link
Collaborator

oze4 commented Sep 3, 2019

@avkonst can you supply the code you are using? An example? Anything...? Are you using custom actions or the built in editable prop?? Going to need more info to help you out.

@avkonst
Copy link
Author

avkonst commented Sep 3, 2019

Hi @oze4 Thank you for considering the ticket. Here is the information I can provide:

Are you using custom actions or the built in editable prop?

I use both. For editable, the code looks like this:

      editable={{
            isEditable: (rowData) => false, // real code uses some logic to make certain rows non editable
            isDeletable: (rowData) => false,
            ....
        }}

For custom actions I use either:

const actions = []
actions.push((rowData) => ({
      hidden: true,
      icon: '',
      onClick: () => { return; }
}))
....
actions={actions}

or this:

const actions = []
actions.push((rowData) => ({
                disabled: true,
                iconProps: {
                    fontSize: 'small'
                },
                icon: () => <>1234</>,
                onClick: () => {
                    ....
                }
            }))
....
actions={actions}

I also override MTableBodyRow component like the following (the purpose is to remove (not disable) per row edit and delete actions for some rows):

const MTableBodyRowOverride = (rowProps: any) => {
        return <MTableBodyRow
                {...rowProps}
                // the following basically removes all actions added by the material-table
                // all my custom actions are marked with the hidden HiddenGroupFold field
                actions={rowProps.actions.filter((i: Function) => !i[HiddenGroupFold])}
            />
        }</>
    }
...
components={{
            Row: MTableBodyRowOverriden
        }}

@oze4
Copy link
Collaborator

oze4 commented Sep 4, 2019

@avkonst you use all of the above examples in a single instance of Material Table? I am interested in the exact case that brought you here.

I use both. For editable, the code looks like this:

  editable={{
        isEditable: (rowData) => false, // real code uses some logic to make certain rows non editable
        isDeletable: (rowData) => false,
        ....
    }}

I am specifically interested in the logic that makes certain rows "non editable".

All in all I think it would be easiest if you supplied a reproducible example that mirrors your issue as close as possible.

@oze4
Copy link
Collaborator

oze4 commented Sep 4, 2019

For example, the following code does not produce any errors:

Edit material-table

export default function AppTable() {
  return (
    <MaterialTable
      actions={[
        rowdata => ({
          icon: () => <DeleteOutlined />,
          disabled: true,
          tooltip: "Delete"
        })
      ]}
      icons={tableIcons}
      data={[
        {
          name: "Rock",
          id: 1
        },
        {
          name: "Paper",
          id: 2
        },
        {
          name: "Scissors",
          id: 3
        }
      ]}
      columns={[
        {
          title: "Item",
          field: "name"
        },
        {
          title: "Item ID",
          field: "id"
        }
      ]}
    />
  );
}

@avkonst
Copy link
Author

avkonst commented Sep 4, 2019

I will try to find a reproducer. I will try to put some time tomorrow for this. I am sure it is isEditable: (rowData) => false causes this. The logic behind this function is less important. In my app it is some rows which do not have permissions to be edited, but you can make every second row non editable, for example.

@avkonst
Copy link
Author

avkonst commented Sep 5, 2019

Here is the reproducer:

<MaterialTable
        columns={[
            {
                field: 'id',
                title: 'ID'
            }
        ]}
        data={[{ id: 'a' }]}
        editable={{
            isEditable: rowData => false,
            onRowUpdate: (newData, oldData) => Promise.resolve()
        }}
    />

@oze4
Copy link
Collaborator

oze4 commented Sep 5, 2019

@avkonst

Here is the reproducer:

<MaterialTable
        columns={[
            {
                field: 'id',
                title: 'ID'
            }
        ]}
        data={[{ id: 'a' }]}
        editable={{
            isEditable: rowData => false,
            onRowUpdate: (newData, oldData) => Promise.resolve()
        }}
    />

This does not cause an error... Can you either supply code that actually reproduces the error you are getting, or close this issue out?? It would seem the issue is with your logic, not with Material Table.

Help me help you.

Edit material-table

export default function AppTable() {
  return (
    <MaterialTable
      icons={tableIcons}
      data={[
        {
          name: "Rock",
          id: 1
        },
        {
          name: "Paper",
          id: 2
        },
        {
          name: "Scissors",
          id: 3
        }
      ]}
      columns={[
        {
          title: "Item",
          field: "name"
        },
        {
          title: "Item ID",
          field: "id"
        }
      ]}
      editable={{
        isEditable: rowData => false,
        onRowUpdate: (newData, oldData) => Promise.resolve()
      }}
    />

@avkonst
Copy link
Author

avkonst commented Sep 5, 2019

Upgrade dependencies to latest and you will reproduce it:
Sandbox is here

image

@oze4
Copy link
Collaborator

oze4 commented Sep 6, 2019

It looks like this started happening in v1.49.0 - it doesn't happen prior to that version. It looks like this commit is the culprit.

I'm 95% positive that removing the <span>'s around the <IconButton>'s is what caused this..

image

@oze4
Copy link
Collaborator

oze4 commented Sep 7, 2019

@avkonst I have submitted a pull request that resolves this issue.. Hopefully it will be merged soon.

@avkonst
Copy link
Author

avkonst commented Sep 7, 2019 via email

@arkadiusz-wieczorek
Copy link

arkadiusz-wieczorek commented Oct 10, 2019

@avkonst that's my workaround, at least I don't receive that error in the console.

actions={[
	rowData => ({
		icon: () => (
			<Delete
				color={
					!rowData.disabled
						? 'inherit'
						: 'disabled'
				}
			/>
		),
		tooltip: 'Delete product',
		onClick: (event, rowData) => {
			if (!rowData.disabled) {
				// do stuff
			} else {
				return null;
			}
		},
	})
]}

ezgif-2-3b74a828edfb

@rkram3r
Copy link

rkram3r commented Oct 18, 2019

Hi 😃
I had the same problem and created a PR.

Edit: There is already a PR

@oze4
Copy link
Collaborator

oze4 commented Oct 18, 2019

@rkram3r I've been waiting a loong while to get that simple PR merged lol... 😢

Sorry =/

mbrn added a commit that referenced this issue Oct 20, 2019
Fix issue #1049 and keeps the fix for issue #910 in tact
@oze4 oze4 closed this as completed May 31, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants