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

Focus is automatically set to the grid on page load #63

Closed
ZimM-LostPolygon opened this issue Jan 3, 2020 · 6 comments
Closed

Focus is automatically set to the grid on page load #63

ZimM-LostPolygon opened this issue Jan 3, 2020 · 6 comments

Comments

@ZimM-LostPolygon
Copy link
Contributor

ZimM-LostPolygon commented Jan 3, 2020

Describe the bug
Continuation of bug #61. Immediately after the page is loaded, the grid component focuses itself, resulting in a page scroll and losing whatever focus was set by the user.

To Reproduce
Steps to reproduce the behavior:

  1. Add GridComponent to the page.
  2. Immediately after the page is loaded, the grid gets focused.

Expected behavior
The grid should not focus automatically when the page is loaded. There is no reason to do so, and it prevents the user from focusing something else on load.

Additional context
The call originates from https://github.com/gustavnavar/Grid.Blazor/blob/master/GridBlazor/Pages/GridComponent.razor.cs#L165
Commenting the line seems to fix the issue for me.
Not sure what this behaviour is for, but it contradicts basic user experience expectations. The page should not scroll without any action from the user. Plus, it will fail if there are more than two grids on a page - which one will get focused?

@timbze
Copy link
Contributor

timbze commented Jan 3, 2020

I agree with this. I have a grid further down on the page, and as it loads it jumps down to the grid.

@gustavnavar
Copy link
Owner

The reason to get the focus on the grid is to be able to use the keyboard for navigation. If the grid compoment has not the focus, keyboard navigation does not work.

The are people who requested this behavior that it seems to be in contradiction with your user experience expectations: #32

My personal point of view is that both user expiriences can be desirabled. So the only option that I see is to add a method to the component to enable or disable the automatic focus on the grid after component load:

  • if automatic focus is enabled, keyboard navigation will work after grid is enabled
  • if automatic focus is disabled, the grid will require the user will focus on the grid, either clicking on it or using tab key, to be able to use keyboard navigation.

I will wait to see other user opinions to implement this feature.

@timbze
Copy link
Contributor

timbze commented Jan 6, 2020

@gustavnavar I agree. For those who mainly use the grid on the page, and use keyboard navigation for sure, they would want it to be focused automatically. I think it would be good to add a method so those who do not want it this way can disable automatic focus.

@ZimM-LostPolygon
Copy link
Contributor Author

ZimM-LostPolygon commented Jan 6, 2020

@gustavnavar People actually using keyboard navigation inside a web page are extremely rare. I believe the automatic focus needs to be disabled by default. Especially since it's basically undefined behavior when there are multiple grids on a single page. There are just too many "buts" to enable it by default for every grid.

Also, I think it makes sense to add an option to disable keyboard navigation completely.

gustavnavar added a commit that referenced this issue Jan 9, 2020
@gustavnavar
Copy link
Owner

GridBlazor 1.3.9 package fix this issue.

The initial plan was to enable/disable autofocus, but there was too many cases to cover and I didn't get an stable solution. So I've had to implement a feature to enable/disable keyboard navigation.

You can enable keyboard navigation between pages using the SetKeyboard method of the GridClient object:

    var client = new GridClient<Order>(HttpClient, url, query, false, "ordersGrid", Columns).SetKeyboard(true);

The parameter default value is false.

@timbze
Copy link
Contributor

timbze commented Jan 13, 2020

@gustavnavar Thank you so much. Appreciate your hard work on this project.

gustavnavar added a commit that referenced this issue Feb 22, 2020
* Update documentation

* Add CRUD support

* Add Guid foreign keys with CRUD

* Update CRUD documentation

* Add ability to change the page size

* Add ability to change the page size

* Add keyboard navigation of the grid (#32)

* Grouping error when column value is null (#41)

* Improvements to filtering (#35)

* Update documentation 3.1

*  Update documentation 3.1

* Fixed Razor compilation errors when using .NET Core 3.1

* Add Css classes override for most important grid elements

* Added HasConstraint property to GridColumnBase

* Reset cached items count value when collection changes

* Fix gridblazor.min.css issue

* Fix compilation error in more components

* Fix drag error on Firefox and Edge (#41)

* Group by property, then sort groups by expression (#33)

* Group by property, then sort groups by expression (#33)

* Add HasConstraint property to GridColumn for MVC

* Provide overloaded RenderComponentAs() with async callbacks(#38)

* Update documentation

* Upgrade to .Net Core 3.1

* Fix issue when collapsing a group (#50)

* Use partial classes for razor pages

* Update documentation

* Update documentation

* Update documentation

* updated readme

* Changed page navigation to ctrl +[Right/Left Arrow key] instead of just Right/Left Arrow keys

* Updated Documentation for Keyboard Navigation commands

* Added Ctrl requirement for Home and End keys to navigate to first and last pages respectively

* Revert "updated readme"

This reverts commit 8dfefac.

* Added multi select capability

* added vscode directory to gitignore

* Updated documentation

* Added Selected Items propery

* updated documentation

* Add clear all filters functionality

* Update localization documentation

* Add multiselectable and Norwegian translation

* Fix bug #56

* Change keyboard modifier key

* Change keyboard modifier key

* Added type="button" to all <button> with no specified type to avoid making them a type="submit" buttons

* Remove Newtonsoft.Json dependency

* Update documentation

* Fix issue #61 and new GridMvcCore string resources

* Update package versions

* Correct parameter assignation

* Modify the  ChangeBool to reflect changes to value false in variable

* Set Id of the new ColumnOrderValue to the max Id plus 1

* Fix issue #63

* Update documentation

* Add list filters

* Add filters on hidden columns and grid events

* Added Turkish Language

* Added Turkish Language

* Add filters on hidden columns and grid events

* Validate that FieldName is not null  in case not mapped column exist

* Add Guid filter

* Validate that FieldName is not null in case not mapped column exist

* Update documentation

* Add method ReadonlyOnUpdate to columns

* Added GridCellCssClass
Added GridItemsCountCssClass

* Hide ReadonlyOnUpdate columns on create page

* Update documentation

* Add NotEqual filter (#79)

* Fix GridMvcCore Ajax currentPage value type

* Update Blazor demos

* Update Blazor demos

* Hide other filter widget when opening a filter #81

* ReadOnUpdate fields should not be hidden on Create.

* Consider case when both ReadOnlyOnUpdate and CrudHidden are used.

* Blazor WA 3.2.0 Preview 1 support

* Update GridBlazor version

* Allow ICustomGridComponent<> type argument to be interface of Grid data type. Addresses issue #53

* Minor fixes for GridBlazor filters and GridMvc pager

* Fix isssue #89

* Fix isssue #87

* Update GridBlazor in MVC demo

* Add Bootstrap 3.x css

* Add Czech translation

* Add DateTime picker and custom comparer sort

* Add nested CRUD

* punctual crud visibility

added punctual visibility for each CRUD mode.

Co-authored-by: Gustavo Navarro <30131949+gustavnavar@users.noreply.github.com>
Co-authored-by: Serhii Yolkin <serhii.yolkin@gmail.com>
Co-authored-by: Deval Ringwala <ringwala@lucasware.com>
Co-authored-by: Ricardo Pacheco <ricardo.pacheco.roldan@gmail.com>
Co-authored-by: İSMAİL KÖSE <kyzaghan@ismailkose.com.tr>
Co-authored-by: timbze <35117769+timbze@users.noreply.github.com>
rgentry09 added a commit to rgentry09/ERP-ASP.NET that referenced this issue Jul 10, 2023
dev0926 added a commit to dev0926/gridNET that referenced this issue Feb 21, 2024
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

3 participants