I am using the createBottomTabNavigator() to create a bottom tab bar with screenOptions={tabBarHideOnKeyboard: true,}.
The behavior of bottomtabbar on keyboard use is showing up and hiding on keyboard use.
is there any solution for not showing the tabbar on the keyboard?
I have a similar issue explained in this ticket: https://github.com/react-navigation/react-navigation/issues/6700.
I can't use android:windowSoftInputMode="adjustPan" this will affect other features.
I tried using keyboard event listeners but their is always a delay in tabbar display on the keyboard.
Related
I have a React App where the user can toggle between different views of the same data structure. When toggling from one view to another, the browser window sometimes automatically scrolls vertically. Instead I am expecting the window to not scroll when possible.
The CodeSandbox here reproduces the issue:
https://codesandbox.io/embed/magical-chebyshev-otlpu?fontsize=14&hidenavigation=1&theme=dark
If you scroll down, then click on "CLICK TO SWITCH VIEW BELOW", you will notice that there's an automatic scroll to the top happening.
I suspect this is an issue with MUI TextField. If I change the MUI TextField to a div, the issue does not show up, so I don't think this is due to React.
I was having an accessibility issue when using Material-UI with React. Specifically when placing a Menu on a Drawer. Essentially the normal behaviour of a Menu is to highlight the top MenuItem. This behaviour is different if that menu is placed on a Material UI Drawer.
I have recreated the problem here using just the example Material-UI Menu and Drawer:
https://codesandbox.io/s/material-ui-menu-and-drawer-accessibility-issues-xjj3h?file=/src/App.js
The following images show the difference between the two menus when opened. I am using the chromevox extension while testing:
A normal menu when using chromevox to show accessability:
A menu when it is placed on a material UI drawer:
Would anyone be able to point out if this is an error in my code or if perhaps there are any workarounds? Was going to raise this as a new github issue but felt it was worth asking the question here first. :)
By default, the drawer enforces (so long as it is open) that focus stays within itself. So when the menu opens and grabs focus, the drawer notices that it lost focus and it grabs it back.
There are two options for fixing this:
You can turn off this drawer behavior by specifying the disableEnforceFocus prop (example here).
You can specify the disablePortal prop on the menu (example here). This will cause the menu to be a descendant of the drawer in the DOM (by default the menu uses portals and is added as a child of the <body> element), so the drawer will not try to "take back" the focus, because when focus is in the menu it will still be within the drawer.
I would recommend option 2 since the drawer's focus enforcement is generally a good thing from an accessibility standpoint.
I've a couple of textFields and textAreas in a screen. When any one of them is focused and then if the sidemenu is opened, I can write on top of side menu. The keyboard doesn't disappear when sidemenu is clicked. In other cases as well, when keyboard is opened and the components like Label etc are touched, it'd be nicer if the keyboard disappear automatically.
See the video here
The effect I'm looking for is a bit hard to describe, but I'm basically trying to implement a header above a scrollView which allows you to scroll normally when touching inside the scrollView, but then when you drag up out of the scrollView onto the header, it moves the header up.
This effect is used with the iPhone keyboard as a footer for messages for example, where you can scroll through messages normally and the keyboard will stay. However, if you scroll down into the keyboard, it drags the keyboard down.
https://facebook.github.io/react-native/docs/scrollview.html#keyboarddismissmode 'interactive' is the effect I'm trying to achieve, but instead of for a keyboard I'm looking to do it for some custom header component which is above my scrollView.
I figure I could match the scroll to the components Y translate Y, however I only want to do this depending on where my touch is. Sadly, the onScroll event doesn't seem to contain any information on the touch location, so I can't tell where the user is dragging. Any help or ideas for other ways to implement this would be greatly appreciated.
I encountered this specific issue with Material's md-dialog:
I click on any of the text boxes on the web page, which brings up
the mobile keyboard, this is on IPad 9.3.2.
after typing, I then either minimise the keyboard or leave it on
and click a button which shows a md-dialog as modal.
the modal shows up, which grays out and blocks the whole page.
but the dialog box appears outside of the screen, i.e. you cant see
it, you cant touch it, you cant close it.
now if I til the screen to change the orientation from horizontal to vertical or vise-versa, the screen resizes and the dialog is shown properly.
so as soon as i use the keyboard the immediate dialog show will be located incorrectly.
I am wondering if any one had this problem before, and if you know how to solve this issue?
Thanks a lot
I had a similar issue and resolved it by wrapping it in a timeout:
var confirm = $mdDialog.confirm()
.title('Test')
.content('This is test content')
.ariaLabel('Test')
.ok('Got it!')
.cancel('Cancel');
$timeout(
$mdDialog.show(confirm).then(function () {
// Do Something
})
, 0);