command.disabled not always respected

[kkazala]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
  • Chrome: 99.0.4844.51 (Official Build) (64-bit)
  • Edge 99.0.4844.51 (Official Build) (64-bit)
• SPFx version: 1.14.0
• Node.js version: 14.15.0

Describe the bug / error

Thank you for fixing #7795!

I now changed my CommandSet logic to:

• Show the command buttons only for the "Travel requests" list
• Disable the "Submit report" by default
• Enable the "Submit report" only if exactly one item is selected AND the "Submitted" == "No"

//onInit executes **CORRECTLY**
public onInit(): Promise<void> {
  const setCommandsState = (isVisible:boolean) => {
    const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
    if (compareOneCommand) {
      //Visible for registered lists, does not depend on selected item
      compareOneCommand.visible = isVisible;
    }
    const compareTwoCommand: Command = this.tryGetCommand('COMMAND_2');
    if (compareTwoCommand) {
      //Visible for registered lists, enabled if 1 item selected, so disable by default
      compareTwoCommand.visible = isVisible;
      compareTwoCommand.disabled = true;
    }
  }
  const getListUrl = (listUrl: string): string => {
    let result = listUrl.match(/Lists\/(?<ListName>.*)/);
    return result.groups["ListName"];
  }
  
  setCommandsState( registeredList.includes(getListUrl(this.context.listView.list.serverRelativeUrl)));
  this.context.listView.listViewStateChangedEvent.add(this, this.onListViewUpdatedv2);
  return Promise.resolve();
}

public onListViewUpdatedv2(args: ListViewStateChangedEventArgs): void{

  const isSubmitEnabled= (this.context.listView.selectedRows.length == 1) && (this.context.listView.selectedRows[0].getValueByName("Submitted") == "No")
  console.log(`isSubmitEnabled: ${isSubmitEnabled}`)

  const compareTwoCommand: Command = this.tryGetCommand('COMMAND_2');
  compareTwoCommand.disabled = !isSubmitEnabled;
  this.raiseOnChange();

  console.log(`compareTwoCommand.disabled: ${compareTwoCommand.disabled}`)
  console.log("refresh")
}

When debugging, the 'COMMAND_2' button is not enabled/disabled when switching between two items with different Submitted values.
I think that this.raiseOnChange() is not required for the disabled state (?). I called it anyway hoping it would fix the issue but it doesn't have any impact.

Steps to reproduce

TEST 1

1. Create new ListView CommandSet solution, keep the two default buttons
2. Update the _CommandSet.ts as presented above
3. Ensure that you have a "Submitted" (Yes/No) column in the list
4. Ensure you have two items in the list, one with Submitted=Yes and the other with Submitted=No
5. Debug
6. Ensure that both buttons are visible, and button "COMMAND_1" is enabled, while "COMMAND_2" is disabled
7. In the list, select the item where Submitted=No
8. Ensure that you get the following console output:
   
9. Ensure that the button "COMMAND_2 is enabled
10. Select the item where Submitted=Yes
11. Ensure that you get the following console output:
    
12. The button "COMMAND_2 should be disabled but it's still enabled

TEST 2

Execute the above steps 1-10, and then
11. Click "outside" of the list to unselect the row
12. Ensure that you get the following console output:

14. The button "COMMAND_2 should be disabled but it's still enabled

Expected behavior

In the step 14 in the tests described above, the COMMAND_2 button should be disabled

[msftbot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[kkazala]

UPDATE: also a much easier logic has the same effect.

public onListViewUpdatedv2(args: ListViewStateChangedEventArgs): void{

   // const isSubmitEnabled= (this.context.listView.selectedRows.length == 1) && (this.context.listView.selectedRows[0].getValueByName("Submitted") == "No")
   // console.log(`isSubmitEnabled: ${isSubmitEnabled}`)

    const compareTwoCommand: Command = this.tryGetCommand('COMMAND_2');
    compareTwoCommand.disabled = !(this.context.listView.selectedRows.length == 1); // !isSubmitEnabled;
    this.raiseOnChange();

    console.log(`compareTwoCommand.disabled: ${compareTwoCommand.disabled}`)
    console.log("refresh")
  }

Test:

1. Create new ListView CommandSet solution, keep the two default buttons
2. Update the _CommandSet.ts with onInit from the first example, and onListViewUpdatedv2 as presented above
3. Debug
4. Ensure that both buttons are visible, and button "COMMAND_1" is enabled, while "COMMAND_2" is disabled
5. Select an item (any item) on the list
6. See that the COMMAND_2 button is not enabled and the following is printed to the console:
   
7. Unselect the item and ensure that no items are selected
8. See that COMMAND_2 button is still enabled, even though the following is printed to the console:
   

[AJIXuMuK]

Thanks @kkazala for reporting this one!
The fix has been done and will be rolled out in the next few weeks.
You will still need to call raiseOnChange if the property is modified out of execute.

[AJIXuMuK]

This should be rolled out WW by now.

[msftbot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues