Button onClick event inside dialog with another input field doesn't fire

Hilla
1

This is the dialog. There is close/save buttons and input field inside the dialog. If you click on input field (to set focus) and click to close or save button then only input field looses its focus, but onClick events aren’t fire. Is it a bug?

<Dialog
			autofocus
			noCloseOnOutsideClick
			width="70%"
			header-title={isEditMode ? `Edit user` : `Add user`}
			opened={opened}
			onClosed={close}
			headerRenderer={() => (
				<Button theme="tertiary" onClick={close}>
					<Icon icon="lumo:cross" />
				</Button>
			)}
			footerRenderer={() => (
				<>
					<Button theme='primary small' className='ms-auto' disabled={invalid} onClick={() => submit(value) }>
						Save
					</Button>
					<Button theme='secondary small' onClick={close}>
						Cancel
					</Button>
				</>
			)}
		>
			<VerticalLayout className="w-full">
				<FormLayout className="w-full" responsiveSteps={[{ columns: 1 }]}>
					<TextField
						required
						minlength={3}
						maxlength={27}
						label={'Login'}
						{...field(model.login)}
					/>
				</FormLayout>
			</VerticalLayout>
		</Dialog >
2

Seems to work in general, assuming that close changes opened to false.

Does it work if you don’t focus the field? Does it work if you try to close again after bluring the field? If you can provide a small example project I could take a closer look at it.

3
  • It works perfect If input field is not focused.
  • If you set focus to input field, click to close button - > input field looses focus → click close button again - > click event fired. So you need to click to close button (actually any button in dialog) twice.
4

Are there any errors in the browser logs? Does it help if you remove {...field(model.login)}?

5

There is no any errors in console log

6

I have a similar behavior in Hilla too.
When a field is focused and I click on a MenuBar, I have to click twice too.

Edit: I am using binder too.

7

Looks like without {...field(model.login)} it works fine

8

Can reproduce it now, you’ve run into this issue: Renderers fully replace DOM, losing state such as focus · Issue #283 · vaadin/react-components · GitHub.

I’ve added a comment about your specific use-case here: Renderers fully replace DOM, losing state such as focus · Issue #283 · vaadin/react-components · GitHub. I also added a workaround to use header and footer.

9

One other option that you have is to not use headerRenderer and footerRenderer and create the dialog layout yourself.