textual icon indicating copy to clipboard operation
textual copied to clipboard

How to prevent RadioButton (that are dynamically mounted to RadioSet) from expansion animation on mouse click?

Open learnbyexample opened this issue 1 year ago • 4 comments

Discussed in https://github.com/Textualize/textual/discussions/5213

Originally posted by learnbyexample November 6, 2024 Here's a sample program:

from textual.app import App
from textual.widgets import RadioButton, RadioSet

class TestApp(App):

    CSS = ''' Screen { align: center middle; } '''

    def __init__(self):
        super().__init__()
        self.rset = RadioSet()    
    
    def compose(self):
        yield RadioSet('apple', 'banana', 'cherry')
        yield self.rset

    def on_mount(self):
        self.dark = False
        rb1 = RadioButton('true')
        self.rset.mount(rb1)
        rb2 = RadioButton('false')
        self.rset.mount(rb2)

if __name__ == "__main__":
    app = TestApp()
    app.run()

Here's a sample video when the above program is run:

https://github.com/user-attachments/assets/f2fbabf2-27c7-4320-a0c1-8ac7a2fa3b15

Is there a way to prevent the RadioButtons from animating in the second case (the RadioSet with true/false choices)?

For my actual use case, I need to dynamically add/remove existing RadioButtons from a RadioSet (the number of RadioButtons vary, need to show a pre-selected choice if applicable, change styling, etc - which is why I'm using mount).

learnbyexample avatar Nov 06 '24 09:11 learnbyexample

We found the following entries in the FAQ which you may find helpful:

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory

github-actions[bot] avatar Nov 06 '24 09:11 github-actions[bot]

I found that using border: none; prevents the expansion animation. I'd now actually prefer if nothing is changed to the current behavior of using mount compared to the normal behavior of RadioSet.

learnbyexample avatar Nov 09 '24 04:11 learnbyexample

Hi @learnbyexample , In the source for Radioset you have some processing for the buttons here. The flickering has to do with the fact that the RadioButtons can have focus. If initialized with the buttons directly this doesnt happen, i.e. btn.can_focus = False is set.

I just tested it with your example, If you adjust that, the flickering doesnt occur:

        self.dark = False
        rb1 = RadioButton('true')
        rb1.can_focus = False
        self.rset.mount(rb1)
        rb2 = RadioButton('false')
        rb2.can_focus = False
        self.rset.mount(rb2)

have a great day :)

Zaloog avatar Nov 14 '24 19:11 Zaloog

@Zaloog thanks!

learnbyexample avatar Nov 15 '24 03:11 learnbyexample