limel-picker does not behave as expected when toggling between disabled and enabled #3766
Description
Current behavior
If a limel-picker is initially rendered as disabled and later changed to enabled, it will still not be interactible.
To reproduce the behavior, create this component. Then click the disable button to remove the disabled flag on the picker. Select a value, and try to remove it again. You will not be able to remove it.
import { LimelPickerCustomEvent, ListItem } from '@limetech/lime-elements';
import {
LimeWebComponent,
LimeWebComponentContext,
LimeWebComponentPlatform,
} from '@limetech/lime-web-components';
import { Component, h, Prop, State } from '@stencil/core';
@Component({
tag: 'lwc-solution-test-just-a-picker',
shadow: true,
})
export class JustAPicker implements LimeWebComponent {
/**
* @inherit
*/
@Prop()
public platform: LimeWebComponentPlatform;
/**
* @inherit
*/
@Prop()
public context: LimeWebComponentContext;
@State()
private disabled: boolean = true;
@State()
private selectedValue: ListItem;
render() {
return [
<limel-picker
value={this.selectedValue}
disabled={this.disabled}
searcher={this.searcher}
label="Just a picker"
onChange={this.handlePickerChange}
/>,
<limel-button label="Disable" onClick={this.handleDisableClick} />,
];
}
private handlePickerChange = (event: LimelPickerCustomEvent<ListItem>) => {
this.selectedValue = event.detail;
}
private searcher = (query: string): Promise<ListItem[]> => {
return Promise.resolve([
{ text: `Result for ${query} 1`, value: 1 },
{ text: `Result for ${query} 2`, value: 2 },
{ text: `Result for ${query} 3`, value: 3 },
]);
};
private handleDisableClick = () => {
this.disabled = !this.disabled;
};
}Expected behavior
When a picker is no longer disabled, it should behave the same as when you render it initially enabled.
Environment
- lime-elements: "version": "38.34.0",
- Framework used: lime-crm
- Logs: No logs