[ai-button | 2.0.1]: cannot change the button text while hidden

[kineticjs]

Bug Description

The text of the button does not properly change while hidden, as can be reproduced in the isolated sample linked below.

Affected Component

ai-button

Isolated Example

https://stackblitz.com/edit/js-tq8tzo?file=index.js,index.html,style.css

Steps to Reproduce

1. Open: https://stackblitz.com/edit/js-tq8tzo?file=index.js,index.html,style.css
2. Notice that the sample contains an ai-button and above it are rendered 2 toggle buttons that control its state:
   -- the "Hide/show the AI button"
   -- the "Change the AI button state"
3. Click the "Hide/show the AI button" button to hide the ai-button
4. Click the "Change the AI button state" button to change the state
5. Click the "Hide/show the AI button" button to show the ai-button
   Expected: The text of the new state is clearly visible
   Actual: The text is not entirely visible, because the button is given css width="0px"
   

UI5 Web Components Version

2.0.1

Browser

Chrome

Additional Context:

Background why we need to update the button state while hidden:

The context can be seen in the following sample:

1. Open https://stackblitz.com/edit/js-dvxm7e?file=index.js,index.html,style.css
2. Click the "Generate" ai-button to open a dialog
3. In the dialog, click "Apply" and wait [few seconds] until the generation ends and the ai-button text becomes "Revise"
4. Click the "Close" button to close the dialog
5. Click the "Send" button at the footer => the user is notified that the message is sent and the form is cleared
6. Repeat step 2 to re-open the dialog to compose new text
   Expected: In the dialog, the text of the ai-button is "Apply"
   Actual: the text of the ai-button is not entirely visible

Note that we tried as a workaround to update the text of the ai-button only when visible i.e. upon opening the dialog, as can be seen if the following sample: https://stackblitz.com/edit/js-abnqhe?file=index.js,index.html,style.css
However, if you follow the same steps to reproduce at sample https://stackblitz.com/edit/js-abnqhe?file=index.js,index.html,style.css you will notice at step 6 visible animation of the ai-button as it changes its text from "Revise" to "Generate" (unexpected to the user)

Additional info:
I tried the following

quick workaround in the Button.ts::_fadeOut function which seemed to fix the issue, but forwarding the case to your side for a complete inspection and solution:

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[IlianaB]

Hello @ui5-webcomponents-topic-b , please have a look at this issue. It seems the text of the button does not properly change while it is hidden.

Regards,
Iliana