KeyError when Carousel contains children other than CarouselSlide

[ruiheng]

Description

I created a ui.carousel and used add_slot('control') to add a 'q-carousel-control' element (as shown in the Quasar documentation examples). However, when switching slides, the following error occurs:

Traceback (most recent call last):
  File "/home/ruiheng/.cache/pypoetry/virtualenvs/lyceum-NKmSERnC-py3.11/lib/python3.11/site-packages/nicegui/events.py", line 411, in handle_event
    result = handler(arguments) if expects_arguments else handler()
             ^^^^^^^^^^^^^^^^^^
  File "/home/ruiheng/.cache/pypoetry/virtualenvs/lyceum-NKmSERnC-py3.11/lib/python3.11/site-packages/nicegui/elements/mixins/value_element.py", line 40, in handle_change
    self.set_value(self._event_args_to_value(e))
  File "/home/ruiheng/.cache/pypoetry/virtualenvs/lyceum-NKmSERnC-py3.11/lib/python3.11/site-packages/nicegui/elements/mixins/value_element.py", line 108, in set_value
    self.value = value
    ^^^^^^^^^^
  File "/home/ruiheng/.cache/pypoetry/virtualenvs/lyceum-NKmSERnC-py3.11/lib/python3.11/site-packages/nicegui/binding.py", line 155, in __set__
    self._change_handler(owner, value)
  File "/home/ruiheng/.cache/pypoetry/virtualenvs/lyceum-NKmSERnC-py3.11/lib/python3.11/site-packages/nicegui/elements/mixins/value_element.py", line 23, in <lambda>
    on_change=lambda sender, value: cast(Self, sender)._handle_value_change(value))  # pylint: disable=protected-access
                                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/ruiheng/.cache/pypoetry/virtualenvs/lyceum-NKmSERnC-py3.11/lib/python3.11/site-packages/nicegui/elements/carousel.py", line 40, in _handle_value_change
    names = [slide.props['name'] for slide in self]
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/ruiheng/.cache/pypoetry/virtualenvs/lyceum-NKmSERnC-py3.11/lib/python3.11/site-packages/nicegui/elements/carousel.py", line 40, in <listcomp>
    names = [slide.props['name'] for slide in self]
             ~~~~~~~~~~~^^^^^^^^
KeyError: 'name'

I believe this error occurs because the _handle_value_change method of the Carousel class does not account for children other than CarouselSlide. The method assumes that all children have a 'name' property, which is not true for the 'q-carousel-control' element.

[falkoschindler]

Thanks for reporting this issue, @ruiheng!

Can you, please, try to create a minimum reproducible code example? This would allow us and the community to help more efficiently. Thanks!
Why is it important to provide a minimal reproducible example?

[python-and-novella]

with ui.carousel(animated=True, arrows=True, navigation=True).props('height=180px') as carousel:
    with ui.carousel_slide().classes('p-0'):
        ui.image('https://picsum.photos/id/30/270/180').classes('w-[270px]')
    with ui.carousel_slide().classes('p-0'):
        ui.image('https://picsum.photos/id/31/270/180').classes('w-[270px]')
    with ui.carousel_slide().classes('p-0'):
        ui.image('https://picsum.photos/id/32/270/180').classes('w-[270px]')
with carousel.add_slot('control'),ui.element('q-carousel-control'):
        ui.button('prev',on_click=carousel.previous)
        ui.button('next',on_click=carousel.next)

[python-and-novella]

I try to fix this in .venv\Lib\site-packages\nicegui\elements\carousel.py:

class Carousel(ValueElement):
    ...
    def _handle_value_change(self, value: Any) -> None:
        super()._handle_value_change(value)
        names = [slide.props['name'] for slide in self if 'name' in self.props.keys()]
        for i, slide in enumerate(self):
            done = i < names.index(value) if value in names else False
            if 'name' in slide.props.keys():slide.props(f':done={done}')

[falkoschindler]

Thanks, @python-and-fiction!
I see, the change handler iterates over all children, even the q-carousel-control element inside the "control" slot, not only all slides in the default slot. This should be an easy fix.