Forum Academy Marketplace Showcase Pricing Features

Can't select fully covered element at Preview mode, plus some other issues

At http://bubble.is/site/cpa,
at My Projects / Project Info / Project Teams / Team Info / Team Members / Team Member Info page
I have a star rating element that shows the average rating that is calculated for the Organizer role or a Team member (if it is turned on via the respective checkbox).

Clicking on the Star Rating element opens another page

  1. the rating control doesn’t give event for clicking it so I had to put a transparent button over it
  2. although the rating control is full covered, it is set to not accept input there. I needed to set that since it was seeming to accept click event in Microsoft Edge (tried on Win10 desktop). I’d expect the Button that is over it to consume the click events.

I tried at preview mode to inspect the value of that rating control, but since it has a transparent button over it I can’t select it. So I had this idea:
3) convert the item name there (at the bottom bar of preview mode) from a text field to a dropdown/combobox (with filter/autocomplete as you type the element name) to allow one to also manually select an item by name. Doing so would highlight that item’s bounding box. Then pressing Inspect one would be able to see that item’s properties

The Star Rating is not supposed to be clicked on to trigger a workflow, since it’s an input, but you can trigger a ‘input’s value is changed’ event.

the thing is I don’t want it to change value there, I want it to be a display of the average rating and clicking on it should go inside the rating page that has multiple star ratings to do the edit

that’s why I put the button over it.

the issue is that it gets events under the button (it shouldn’t)

the other two suggestions were

  • to be able to pick hidden (and zero sized) and obscured items in preview mode (a name dropdown) that you now can’t

  • and to maybe have click events for all controls, even when they’re input disabled, so that you can use them as buttons without having to add a transparent button over them. That way you can even make custom control behaviour (dding a click handler to do some custom logic). In cases though where a disabled cursor is shown (like the star rating shows on hover when input disabled), its best to override that cursor and always show a hand cursor when click event handler has been defined for such controls

Put the star rating in group, and use click on that ?

so the events pass through from the star rating down to the group underneath?

disabling the star rating shows a disabled hover cursor, so it is better with the transparent button over it since it doesn’t show the cursor

I’d expect the events to not pass through. Since they pass though, what is the order of execution? do they get processed by overlapping controls from bottom to top or from top to bottom?

Can any control consume the event so that others ovelapping at the same point won’t process it?

In my case with the transparent button, the star rating underneath had to be disabled to not process the click. If it hadn’t such option to disable input then I would have needed some way from the button event handler to tell it to consume (mark as handled) the event if it is propagating from top to bottom. If propagating the other way arround, then no luck

It is the same thing as your button, you put a transparent group over the top to make it clickable.

I use this quite a lot to navigte using repeating groups’ groups.

difference is the button shows hand cursor, not sure if groups show such if they have a click event handler defined (maybe they should)