command.disabled still not working

[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)
• SPFx version: 1.14.0
• Node.js version: 14.19.0

Describe the bug / error

Related to #7845

I finally had time to test it and still not working.
The logic is as follows:

• Show the command buttons only for the list "registered" in the properties
• Show and disable the button by default
• Enable the button only if exactly one item is selected

  public onInit(): Promise<void> {
    const _setCommandsState = (isVisible:boolean) => {
      const command: Command = this.tryGetCommand(COMMAND_NAME);
      if (command) {
        command.visible = isVisible;
        command.disabled = true;
      }
    }
    this.context.listView.listViewStateChangedEvent.add(this, this.onListViewUpdatedv2);

    const registeredList = this.properties.registeredList.split(";");
    _setCommandsState(registeredList.includes(this.context.listView.list.title));
    return Promise.resolve();
  }

  public onListViewUpdatedv2(args: ListViewStateChangedEventArgs): void {
    Logger.write("onListViewUpdatedv2");
    const itemSelected = !isUndefined(this.context.listView.selectedRows) && this.context.listView.selectedRows.length ==1;
    const command: Command = this.tryGetCommand(COMMAND_NAME);
    if (command && command.disabled === itemSelected) { 
      command.disabled = !itemSelected;
      this.raiseOnChange();
      console.log(`itemSelected: ${itemSelected}, command.disabled: ${command.disabled}`);
    }
  }

Steps to reproduce

1. Create new ListView CommandSet solution, with one button
2. Update the _CommandSet.ts as presented above
3. Debug
4. Ensure that the button is visible but disabled
5. Select an item in the list: the button is visible and enabled
6. unselect item
7. correct state is displayed in the console: "itemSelected: true, command.disabled: false", or "itemSelected: false, command.disabled: true"
8. the item is still enabled

Expected behavior

The button should be disabled in step 7) above, if no items are selected

[ghost]

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

[AJIXuMuK]

Hi @kkazala - I just checked on multiple tenants and disabled is working fine.
I'm attaching my testing solution.
Please, double check you don't have any extra logic that leads to reflow/recalc of the disabled value on your side.
disabled.zip

[kkazala]

Hi @AJIXuMuK
Thank you for the code sample, it's a great idea to make sure we are on the same page =)
From what I see, the issue I'm experiencing is due to the listViewStateChangedEvent event.
Since onListViewUpdated is deprecated, I switched to the new List View State Changed Event and this is what is causing the issue.

Please try the following code:

public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, 'Initialized DisabledCommandSet');
    this.context.listView.listViewStateChangedEvent.add(this, this.onListViewUpdatedv2);    //<-- ADD

    return Promise.resolve();
  }

  public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
    const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
    if (compareOneCommand) {
      // This command should be hidden unless exactly one row is selected.
      compareOneCommand.disabled = event.selectedRows.length === 1;
    }
    this.raiseOnChange();
  }

  public onListViewUpdatedv2(args: ListViewStateChangedEventArgs): void {     //<-- ADD
    const compareTwoCommand: Command = this.tryGetCommand('COMMAND_2');
    if (compareTwoCommand) {

      compareTwoCommand.disabled = this.context.listView.selectedRows.length === 1;
    }
  }

And see the difference between the two buttons

[AJIXuMuK]

Sorry @kkazala - I forgot 1.14 still has old template :)
Attached is the updated code to use listViewStateChangedEvent... and it is working also.
disabled.zip

[kkazala]

Hi @AJIXuMuK

You are absolutely correct that in the sample I shared I forgot to add this.raiseOnChange(); in the onListViewUpdatedv2.
However, I do have it in my solution.

I just added it to the "disabled" solution and the code is as follows

export default class DisabledCommandSet extends BaseListViewCommandSet<IDisabledCommandSetProperties> {

  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, 'Initialized DisabledCommandSet');
    this.context.listView.listViewStateChangedEvent.add(this, this.onListViewUpdatedv2);
    return Promise.resolve();
  }

  public onListViewUpdatedv2(args: ListViewStateChangedEventArgs): void {
    const compareTwoCommand: Command = this.tryGetCommand('COMMAND_2');
    if (compareTwoCommand) {
      compareTwoCommand.disabled = this.context.listView.selectedRows.length === 1;
    }
    this.raiseOnChange();
  }

  public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
    switch (event.itemId) {
      case 'COMMAND_1':
        Dialog.alert(`${this.properties.sampleTextOne}`);
        break;
      case 'COMMAND_2':
        Dialog.alert(`${this.properties.sampleTextTwo}`);
        break;
      default:
        throw new Error('Unknown command');
    }
  }
}

And sadly.... same result.

I've been using node 14.19.1, but just installed 14.15.5 and it's exactly the same :'(

[AJIXuMuK]

Finally I was able to repro this issue on one list - looking into it.
Thanks!

[AJIXuMuK]

@kkazala - finally got it fixed. Hopefully, no other broken scenarios :)
The fix will be rolled out in the next few weeks.

[AJIXuMuK]

this should be rolled out WW by now

[ghost]

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