ToolbarAndroid Actions Disappear On Change With Input Focus #11209
Comments
|
Not sure exactly why, but this works :D https://rnplay.org/apps/5TeqFg have you tried not re-creating a new array every time, but change the array in-place? |
|
I don't think so: https://rnplay.org/apps/rEcEWw (unless I misunderstood what you meant). |
|
the link I attached does work for me, ie. the toolbar gets updated correctly. just by adding the |
|
@DanielMSchmidt you were mentioned in the linked issues, so maybe you'd interested in this one since it provides a nicely isolated repro In my case the bug shows when I go through a guide that spans several screens - in one there is a textinput and if the user writes something into it, the right action icons will not be displayed on the next screen. If the user skips editing the textinput, the icons are there. I'm 100% sure this is not a problem with my code. |
|
@jaystramel Do you find a solution? |
|
Had the same problem. Don't know why, but a hack like this seems to work: <View style={style.root}>
<ToolbarAndroid
navIcon={leftItem && leftItem.icon}
onIconClicked={leftItem && leftItem.onPress}
title={title}
titleColor={textColor}
actions={actions}
onActionSelected={this.handleActionSelected}
overflowIcon={require('assets/mobile/more_vert.png')}
style={style.toolbar}
>
{children}
</ToolbarAndroid>
{/* Added this Text component ↓ */}
<Text style={{ height: 0, opacity: 0 }}>
{JSON.stringify(actions)}
</Text>
</View> |
|
@chenvan No. I wrote a custom component for the two places we need this. (Sorry the delay, never saw the notification.) |
|
@jaystramel Never mind. I just write a component which is similar to ToolbarAndroid to avoid this problem. |
|
Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally! If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:
If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution. |
Summary: Fixes #11209 Updating action items in a `ToolbarAndroid`, or more specifically the native `ReactToolbar`, after the initial render presently will not always work as expected - typically manifesting itself as new action items not being displayed at all (under certain circumstances). This seems to be happening because Fresco gets back to us asynchronously and updates the `MenuItem` in a listener. However when a keyboard is displayed the `Toolbar` is in a weird state where updating the `MenuItem` doesn't automatically trigger a layout. The solution is to trigger one manually. This is a bit wacky, so I created a sample project: https://github.com/Benjamin-Dobell/DynamicToolbar `master` demonstrates the problem. Run the project, the toolbar action item is scheduled to update every 2 seconds. It works fine _until_ you give the `TextInput` focus. Once you give it focus the action item disappears and it never recovers (despite on-going renders due to state changes). You can then checkout the `fixed` branch, run `yarn` again, and see that problem is fixed. This branch is using a prebuilt version of React Native with this patch applied. Of course you could (and probably should) also modify `master` to use a version of RN built by the Facebook CI (assuming that's a thing you guys do). Closes #13876 Differential Revision: D5476858 Pulled By: shergin fbshipit-source-id: 6634d8cb3ee18fd99f7dc4e1eef348accc1c45ad
Summary: Fixes #11209 Updating action items in a `ToolbarAndroid`, or more specifically the native `ReactToolbar`, after the initial render presently will not always work as expected - typically manifesting itself as new action items not being displayed at all (under certain circumstances). This seems to be happening because Fresco gets back to us asynchronously and updates the `MenuItem` in a listener. However when a keyboard is displayed the `Toolbar` is in a weird state where updating the `MenuItem` doesn't automatically trigger a layout. The solution is to trigger one manually. This is a bit wacky, so I created a sample project: https://github.com/Benjamin-Dobell/DynamicToolbar `master` demonstrates the problem. Run the project, the toolbar action item is scheduled to update every 2 seconds. It works fine _until_ you give the `TextInput` focus. Once you give it focus the action item disappears and it never recovers (despite on-going renders due to state changes). You can then checkout the `fixed` branch, run `yarn` again, and see that problem is fixed. This branch is using a prebuilt version of React Native with this patch applied. Of course you could (and probably should) also modify `master` to use a version of RN built by the Facebook CI (assuming that's a thing you guys do). Closes #13876 Differential Revision: D5476858 Pulled By: shergin fbshipit-source-id: 6634d8cb3ee18fd99f7dc4e1eef348accc1c45ad
Description
The actions seem to disappear when they are updated if an input is focused. Updating the actions seem to work as long as no inputs are focused.
This did not happen on version 0.29 but breaks on 0.38. I think that there is a related crash on 0.37, but it's more difficult to recreate.
Reproduction
https://rnplay.org/apps/jFEJew
Solution
Unknown.
Additional Information
The text was updated successfully, but these errors were encountered: