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

[Bug] Клавиатура в мобильном клиенте на Android перекрывает ModalPage #961

Open
a1phaZ opened this issue Aug 20, 2020 · 0 comments

Comments

@a1phaZ
Copy link

a1phaZ commented Aug 20, 2020

Описание
Имеется ModalPage с Input'ом, при фокусе на input'е в Android версии мобильного клиента вызывается клавиатура и перекрывает половину ModalPage.

Шаги воспроизведения
Стандартная модалка с полем ввода. Прикрученая к Root или View компоненту. Поведение одинаковое

Ожидаемое поведение
Клавиатура не перекрывает модалку.

Скриншоты
habit_modal1
habit_modal2

Код модалки:

const modal = (
  <ModalRoot
    activeModal={state.activeModal}
    onClose={modalBack}
  >
    <ModalPage
        id={'add-habit'}
	onClose={modalBack}
	dynamicContentHeight
	header={
	  <ModalPageHeader
	    left={osName !== IOS && <PanelHeaderButton onClick={modalBack}><Icon24Cancel/></PanelHeaderButton>}
	    right={osName === IOS &&
	      <PanelHeaderButton onClick={modalBack}>{osName === IOS ? 'Готово' : <Icon24Dismiss/>}</PanelHeaderButton>}
          >
             Создать цель
         </ModalPageHeader>
	}
	>
	<FormLayout
	  onSubmit={(e) => {
	    e.preventDefault();
	    doApiFetch({
	      method: 'POST',
	      title: title,
	      days: days
            });
	   dispatch({type: SET_MODAL, payload: {modal: null}});
	   setDays(21);
	   setTitle('');
	}}
      >
      <Input
	required
	type={'text'}
	value={title}
	onChange={(e) => {
	  setTitle(e.currentTarget.value)
	}}
	top={'Название цели'}
      />
      <Slider min={1} max={21} step={1} value={days} top={`Кол-во дней: ${days}`} onChange={(d) => {
        setDays(d)
      }}/>
      <CellButton
	before={<Icon24Add/>}
      >
	Создать цель
      </CellButton>
    </FormLayout>
  </ModalPage>
</ModalRoot>
)

Вызов

<PopoutWrapper alignY="center" alignX="center">
  <Root activeView={state.view} popout={state.popout} modal={modal}>
    ...
  </Root>
</PopoutWrapper>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: 🗃 Backlog
Development

No branches or pull requests

3 participants