Can't set RTL on input nor amp-autocomplete or form

[omar-dulaimi]

What's the issue?

An input field/form/amp-complete should have the ability to set the dir property to change direction from LTR to RTL. Also, both the cursor and text are aligned left not right.

How do we reproduce the issue?

                <form
                                         className="amp-search-areas-form"
                                         method="get"
                                         action-xhr={`${hostName}/search`}
                                         target="_top"
                                         id="searchform"
                                         dir="rtl"
                                     >
                                         <amp-autocomplete
                                             filter="substring"
                                             filter-value="name"
                                             src={`${hostName}/api/areas`}
                                             query="name"
                                             submit-on-enter="true"
                                             highlight-user-entry="true"
                                             items="items"
                                         >
                                             <input
                                                 dir="rtl"
                                                 type="search"
                                                 name="queryInput"
                                                 on="input-throttled:AMP.setState({ area: event.value })"
                                                 role="areasearch"
                                                 tabIndex="3"
                                                 className="amp-search-areas-input"
                                                 placeholder="مثال (نص بالعربي)"
                                             />
                                             <AmpMustache
                                                 template={`
                                                         <div data-value="{{name}}">
                                                             <div>{{ name }}</div>
                                                         </div>`}
                                             />
                                         </amp-autocomplete>
                                     </form>

What browsers are affected?

All browsers

Which AMP version is affected?

2008220050001

Update

I was able to fix this issue by this:

 amp-autocomplete > input,
            amp-autocomplete > textarea {
                font-size: large !important;
                direction: rtl !important;
                font-weight: 500 !important;
                padding: 0 14px 0 14px !important;
  }

[omar-dulaimi]

Any updates on this?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.