There is something really wrong with these examples

[mationorato]

Describe the bug

If you click any button in the official examples fast enough, you can break the expected behavior.

Screen.Recording.2023-03-05.at.01.56.22.mov

How to reproduce it

Go to https://surface-ui.org/slots

The behavior you expected

The value and the style should be on sync

Your Environment

Surface: v0.X.X
LiveView: v0.X.X
Elixir: v1.X.X

[Malian]

Hi @mationorato. Thanks for reporting the issue. FYI, I transferred the issue into the Surface site repository.

This is not an issue with Surface, neither with LV. It's because one or more event is sent after the first one, before the server returns the response of the first one. Moreover, there is no logic behind the scene, except adding or subtracting 1 to the current state. It means that if the state is 1 and if you click fast enough on the minus button, two event dec will be sent and the state will be -1.

See the following code for more details.

surface_site/lib/surface_site_web/live/slots/slot_props_example.ex

Lines 31 to 37 in 8d3be3f

	def handle_event("inc", _, socket) do
	{:noreply, update(socket, :value, &(&1 + 1))}
	end
	def handle_event("dec", _, socket) do
	{:noreply, update(socket, :value, &(&1 - 1))}
	end

To fix this, we should not allow a value lower than 0 or higher than 5 in the backend, and not only in the frontend. I see 3 paths we can take:

1. Let things like this, as this is not really an "error", and take the risk than someone else reports the same issue.
2. Fix the logic in the backend, while losing simplicity as the goal of this documentation is to explain Surface and not LV.
3. Add a note, to mention that the current implementation is not perfect.

I am in favour of (3). WDYT ? If you agree, PR is welcome!

[mationorato]

Thanks for taking the time to respond to this.

I understand the error, I think that 3 is okay too.

We should add some notes that make explicit that we always need to handle the expected behavior on the backend, and not on the front.

I think that would be really important because people tend to copy these examples into production.

[msaraiva]

Note added:

Note: for simplicity, the example here does not implement any kind of validation on the backend nor any blocking on the client to prevent multiple clicks leading to a negative value. The goal is just to explain how slots work. In production, your should probably do both.