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

Text selection mixin throws JS errors when used in Grid #243

Closed
kuchtik opened this issue Nov 2, 2020 · 3 comments · Fixed by #247
Closed

Text selection mixin throws JS errors when used in Grid #243

kuchtik opened this issue Nov 2, 2020 · 3 comments · Fixed by #247
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@kuchtik
Copy link

kuchtik commented Nov 2, 2020

Hello, I found a problem with SuperBigDecimalField when it is used in grid. Everywhere else it works good for me. I have some form where I need to show grid with some data and each row needs SuperBigDecimalField, where I can change value. It looks like this:

image

Here is my code:

final Map<NotificationEvent, Binder<NotificationEvent>> eventBinders = new HashMap<>();
events.forEach(event -> eventBinders.put(event, new Binder<>(NotificationEvent.class)));
Grid<NotificationEvent> grid = new Grid<>(NotificationEvent.class, false);
grid.addColumn(NotificationEvent::getEventType).setHeader("Event type");
grid.addColumn(new ComponentRenderer<>(event -> {
    SuperBigDecimalField limitTextField = new SuperBigDecimalField(event.getLimit(), null, locale, 0);
    limitTextField.withAutoselect(true)
            .withGroupingSeparatorHiddenOnFocus(true)
            .withNullValueAllowed(true)
            .setDecimalFormat(new DecimalFormat("#,##0.##", new DecimalFormatSymbols(locale))));
    eventBinders.get(event).forField(limitTextField)
            .withValidator(value -> value == null || BigDecimal.valueOf(0).compareTo(value) <= 0, "Limit has to be 0 or bigger")
            .bind(NotificationEvent::getLimit, NotificationEvent::setLimit);
    return limitTextField;
})).setHeader("Limit");
// some more columns...
grid.setItems(events);

But when I open this form on page, it starts to generate some javascript errors:

image

And when I click in field, I got some other errors:

image

When I use basic vaadin's BigDecimalField instead it works good. Is there any way to solve this to use your SuperBigDecimalField in this case please? Thank you!

@vaadin-miki
Copy link
Owner

thank you for reporting the issue and for providing sample code; I am no expert in Grid (given how wonderfully complex it is)... but let me take a look next week, it is quite important to me that the components work with both grid and binder

@vaadin-miki vaadin-miki added bug Something isn't working help wanted Extra attention is needed labels Nov 11, 2020
@vaadin-miki vaadin-miki modified the milestones: Backlog, Next release Nov 11, 2020
@vaadin-miki
Copy link
Owner

first look indicates there is something fishy in the text selection mixin; it also breaks if you use SuperTextField instead of the number field

@vaadin-miki vaadin-miki changed the title Javascript errors while using SuperBigDecimalField in grid cells Text selection mixin throws JS errors when used in Grid Nov 20, 2020
@vaadin-miki
Copy link
Owner

vaadin-miki commented Nov 20, 2020

okay, issue is cased during init of a text field, for some reason when listenToEvents is called for the first time, the input component to listen to is undefined - needless to say, it only happens inside Grid

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants