search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.51k stars 260 forks source link

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

Open kineticjs opened 1 day ago

kineticjs commented 1 day ago

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" issue

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 quickfix 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

IlianaB commented 1 day ago

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