Dropdown property show seems not working with ix-angular

[angelina999990]

What happened?

"@siemens/ix-angular": "^1.2.1", @siemens/ix: 1.3.0

        <ix-dropdown
            [show]="isOpen"
            closeBehavior="outside"
        >
            content...
        </ix-dropdown>

ix-dropdown has a boolean property show. As I understand, it should open/close when variable isOpen changes. But it doesn't change its visibiliy when isOpen value changes.

What type of frontend frameware are you seeing the problem on?

Angular

Which version of iX do you use?

v1.3.0

Code to produce this issue.

        <ix-dropdown
            [show]="isOpen"
            closeBehavior="outside"
        >
            content...
        </ix-dropdown>

@Component({
    selector: 'test-dropdwon',
    templateUrl: './test-dropdown.component.html',
    styleUrls: ['./test-dropdown.component.scss'],
})
export class TestComponent {
    isOpen = false;

    handleToggle(e: Event) {
        e.preventDefault();
        this.isOpen = !this.isOpen;
    }
}

[nuke-ellington]

@angelina999990 Not sure how you trigger handleToggle, but my guess is that closeBehavor outside will close the dropdown when a button gets clicked for that?

I see two solutions to this:

1. Add e.stopPropagation() to your callback
2. Use the trigger attribute rather than show to open the dropdown

[angelina999990]

@angelina999990 Not sure how you trigger handleToggle, but my guess is that closeBehavor outside will close the dropdown when a button gets clicked for that?

I see two solutions to this:

1. Add e.stopPropagation() to your callback
2. Use the trigger attribute rather than show to open the dropdown

@nuke-ellington handleToggle is triggered when click a Cancel button inside dropdown, which would set isOpen to false. And angular is supposed to detect the change of show attribute, but it seems didn't detect it.

Because I want to programmatically control the visibility of dropdown, currently I'm using belowing solution as a workaround, which does work out.

@Component({ ... })
export class TestComponent {
    // ... 

    @ViewChild(IxDropdown) dropdown!: IxDropdown;

    handleToggle() {
        if (this.dropdown) {
            this.dropdown.show = false;
        }
    }
}

        <ix-dropdown
            [ixDropdownTrigger]="trigger"
            closeBehavior="outside"
        >
            <div>
                ... other content
            </div>
            <div class="footer">
                <ix-button (click)="handleToggle()">
                    Cancel
                </ix-button>
            </div>
        </ix-dropdown>

[danielleroux]

Fixed in 2.0.0