Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

prop.Value("") does not produce the correct html on first render #299

Open
VinceJnz opened this issue May 22, 2022 · 0 comments
Open

prop.Value("") does not produce the correct html on first render #299

VinceJnz opened this issue May 22, 2022 · 0 comments

Comments

@VinceJnz
Copy link

These do not produce the correct html on first render.
They should add value="" to the select options element but they don't initially do it.

prop.Value("")
vecty.Property("value", "")

I am using this as a workaround.
vecty.Attribute("value", "")

The problem this causes is that when the select item is used in a form and is specified as required, the form validation does not work unless the first option has value=""

You can see the impact here in the "try it yourself" page
https://www.w3schools.com/tags/att_select_required.asp

This is what should be produced

<form>
  <select id="Select option" required="">
      <option value="" selected="true">Select option</option>
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
      <option value="3">Test 3</option>
      <option value="4">Test etc...</option>
  </select>
</form>

This is what is initially produced

<form>
  <select id="Select option" required="">
      <option selected="true">Select option</option>
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
      <option value="3">Test 3</option>
      <option value="4">Test etc...</option>
  </select>
</form>

This is an example of the code I am using to produce the html

type ItemView struct { //ItemView
	vecty.Core

	Index    int               `vecty:"prop"`
	ID       int64             `vecty:"prop"`
	Item     *ItemStruct       `vecty:"prop"`
	Selected bool              `vecty:"prop"`
	Disabled bool              `vecty:"prop"`
}


func (p *ItemView) Render() vecty.ComponentOrHTML {
  if p.Item == nil {
      return elem.Option(
	      vecty.Markup(
		      //prop.Value(""), //doesn't work
		      //vecty.Property("value", ""), //doesn't work
		      vecty.Attribute("value", ""), //work-around for the above
		      vecty.MarkupIf(p.Selected, vecty.Attribute("selected", true)),
		      prop.Disabled(p.Disabled),
	      ),
	      vecty.Text("Select option"),
      )
  } else {
      return elem.Option(
	      vecty.Markup(
		      prop.Value(strconv.FormatInt(p.ID, 10)),
		      vecty.MarkupIf(p.Selected, vecty.Attribute("selected", true)),
		      prop.Disabled(p.Disabled),
	      ),
	      //vecty.Text(text),
	      vecty.Text(p.Item.Name+" ("+p.Item.Description+")"),
      )
  }
}
type ListView struct {
	vecty.Core

	Label            string                 `vecty:"prop"`
	ValueID          *int64                 `vecty:"prop"`
	Required         bool                   `vecty:"prop"`
}

func (p *ListView) Render() vecty.ComponentOrHTML {
  var items vecty.List
  items = append(items, &ItemView{Index: -1, ID: 0, Selected: (*p.ValueID == 0), Disabled: false})

  for i, item := range MyItems {
    items = append(items, &ItemView{Index: i, ID: item.ID, Item: item, Selected: (*p.ValueID == item.ID), Disabled: false})
  }
  
  return elem.Div(
      elem.Label(
	      vecty.Markup(
		      prop.For(p.Label),
	      ),
	      vecty.Text(p.Label),
      ),
      elem.Select(
	      vecty.Markup(
		      prop.ID(p.Label),
		      event.Change(p.onChange),
		      vecty.MarkupIf(p.Required,
			      vecty.Property("required", true),
		      ),
	      ),
	      items,
      ),
  )
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant