[Feature Request]:Exposing event when texts are selected in Input/TextArea/Label/Text

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 262 forks source link

[Feature Request]:Exposing event when texts are selected in Input/TextArea/Label/Text #7830

Open bennylalala opened 10 months ago

bennylalala commented 10 months ago

Feature Request Description

Hi Team

We are working on a feature. It requires listening on sort of event when texts are selected in Input/TextArea/Label/Text. Please refer to the screen. When user selects the texts in the text area, we would show some widget next to the selected texts.

Proposed Solution

We might have way to listen on select or mouseup event and use window.getSelection(), but that relies on the internal input, textarea or text element wrapped by the component. Ideally, the component can expose one event when texts are selected by mouse or keyboard. The event data could be the selected texts and coordinates.

Proposed Alternatives

No response

Organization

SAP Successfactors

Additional Context

No response

Priority

Medium

Privacy Policy

[X] I’m not disclosing any internal or sensitive information.

tsanislavgatev commented 10 months ago

Hello colleagues,

Can you have a look at this feature request? It's for several controls but the Text Area and Input are on your side, that's why I am sending it to you. Can you please evaluate if this is something that we can provide and if it is a good fit for the controls?

Best Regards, Tsanislav

hristop commented 9 months ago

Internal BLI crested: FIORITECHP1-29316

MapTo0 commented 7 months ago

Dear reporter,

we started working on the feature request. In order to prevent exposing APIs that might be handy to your side we have the following proposal:

we merge #8340 where you will get the select and scroll event exposed on the textarea API
we will then provide you an util (js module as a snippet) which will enable you to get selection info (coordinates, text, etc)
you can then play around with it and give us some feedback regarding API, what can be improved or completely changed

Once we agree on a stable and suitable API for the use case we will move the util to our code and it will become a blackbox for you.

Would that be okay for you?

Best Regards! Martin

hristop commented 6 months ago

Hi @bennylalala ,

Would you agree with the proposed workflow?

Best Regards, Hristo

github-actions[bot] commented 5 months ago

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

BennyHuang commented 5 months ago

@hristop It works by listening on the select event. And we have our util to get the coordinates by using Selection API. So we are good with this solution.

I see only TextArea exposes this event right now... Input needs to expose the same.

Other than TextArea/Input, we need similar stuff for readonly text or label. They do not have select event, but we figured it out by using Selection API in our util as well.

github-actions[bot] commented 4 months ago

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

TeodorTaushanov commented 2 months ago

Hi @bennylalala,

Handling text selection can be done with pure JavaScript code. Can you check this example: https://jsbin.com/vanimiv/edit?html,output

Select a text with the mouse, "mouse up" and a button that opens a popover should appear.

Do you think this approach can work for you?

Best, Teo