Repository: streamlit/streamlit

Issue:
Clicking on a text field in the sidebar (on mobile) causes the sidebar to close.
# Summary

When the window is too narrow, clicking on a text input in the sidebar causes the sidebar to disappear, making it impossible to type in text. [[video example](https://drive.google.com/file/d/1KetCBECPsg3UAiESZCRdm6W9M_zIrNkc/view?usp=sharing)]

# Steps to reproduce

1. Put a text input in the sidebar.
2. Make the Streamlit app window narrow.
3. Click the text input in the sidebar.

## Expected behavior:

Ideally, the sidebar would stay open and the text input box would have focus and you coudl type something in.

In fact, this _does_ happen when the window is a bit wider. [[video example](https://drive.google.com/file/d/1fObxQWIjkL_5VBJY_niltG489Ki8tRB8/view?usp=sharing)]

## Actual behavior:

Clicking on a text input in the sidebar causes the sidebar to disappear, making it impossible to type in text. [[video example](https://drive.google.com/file/d/1KetCBECPsg3UAiESZCRdm6W9M_zIrNkc/view?usp=sharing)]

## Is this a regression?

Unkown

# Debug info

- Streamlit version: `Streamlit, version 0.68.0`
- Python version: `Python 3.8.5`
- Using Conda? PipEnv? PyEnv? Pex? `pipenv, version 2020.8.13`
- OS version: 
```
Distributor ID: Ubuntu
Description:    Ubuntu 20.04.1 LTS
Release:        20.04
Codename:       focal
```
- Browser version: `Safari on iPadOS 14`


Discussion:
Naomi Most commented: Requested by [~accountid:5f571ad5c9c528007ca18054] 
Dev notes:
Hm, unable to repro on Chrome/Windows with a simple example https://share.streamlit.io/akrolsmir/streamlit-snippet/main?snippet_id=8zu2vvp2

```
import streamlit as st

input = st.sidebar.text_input('Write some stuff')
st.write(input)
```

Also did not repro on Safari/Macbook.
But it repros on Chrome/Android. So it's probably a mobile slash touch-related issue.
The app is not re-running, just popping. Is it related to touch event vs click event? TextInput is a BaseWeb component, so look there.
TextInput.tsx: onBlur, onKeyPress, onChange are not firing when this thing disappears.
Sidebar.tsx: toggleCollapse is not firing (?!)... AHA! It's checkmobileOnResize().
So why does tapping on Sidebar trigger a resize event? Oh, probably cuz the keyboard pops up all of a sudden
Ideas:

0. Do nothing
1. Remove checkMobileOnResize entirely
2. Only collapse if the innerWidth got smaller? This has the advantage of doing the right thing when a user is making the window wider/taller/shorter. But requires another parameter to track. (Also in the video cast it didn't really look like Adrien's innerwidth was changing?)
3. Only collapse if innerWidth just equalled the threshold? Could be bad if checkMobileOnResize is used for other things. Also, this doesn't work, since resize sometimes skips over the threshold (not every pixel size fires)

Let's do 2.

Resolving patch:
diff --git a/e2e/scripts/st_sidebar.py b/e2e/scripts/st_sidebar.py
--- a/e2e/scripts/st_sidebar.py
+++ b/e2e/scripts/st_sidebar.py
@@ -24,3 +24,5 @@
 
 x = st.sidebar.text("overwrite me")
 x.text("overwritten")
+
+y = st.sidebar.text_input("type here")


Test patch: