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

[input] [moved div element in component in state RTL] #2264

Open
mmtaheri opened this issue Dec 25, 2023 · 3 comments
Open

[input] [moved div element in component in state RTL] #2264

mmtaheri opened this issue Dec 25, 2023 · 3 comments

Comments

@mmtaheri
Copy link

Describe the bug
Moved child div in state RTL Body in component INPUT
please support RTL in component

Expected behavior
A clear and concise description of what you expected to happen.

Actual behavior
A clear and concise description of what is happening instead.

Show your code
https://tw-elements.com/snippets/tailwind/temp/5866368

Desktop (please complete the following information):

  • OS: [windows]
  • Browser [chrome,]
  • Version [120]

Additional context
Add any other context about the problem here.

@juujisai
Copy link
Contributor

Hi! We are aware of input issues in RTL mode. We are planning to make updates to the package so that the RTL mode would work correctly.

@hasan-sh
Copy link

hasan-sh commented Jan 18, 2024

Hi! We are aware of input issues in RTL mode. We are planning to make updates to the package so that the RTL mode would work correctly.

Any ideas when? I couldn't find any issue regarding that other than #2077! I have an issue with the select elements:
image

As you can see, there's multiple problems here; e..g, the select box, arrow, checkbox and text need to be replaced.

@iprzybysz
Copy link
Contributor

Hi @hasan-sh, we're reading up on this problem in our package and Tailwind CSS. We'll fix it as soon as possible.

mergify bot pushed a commit to hedyorg/hedy that referenced this issue Jan 24, 2024
Fixes #4954 
# Features
Initially the page shows all available public adventures.
![image](https://github.com/hedyorg/hedy/assets/20051470/66d39d18-4d5d-4346-9468-d09bebe45342)

There are four filters that teachers can utilize in order to find adventures quickly. These filters are:
1. search input: finds an adventure whose name matches the search input
2. level (default=1): gets adventures of a specific level. Only one item can be selected.
3. language: gets adventures of a specific language. Only one item can be selected.
4. tags: gets adventures that have at least one of the selected tags. Multiple items can be selected.

Another interesting and important feature is that the URL always updates wrt the filters. For instance, if you filter by English, the URL will be something like: public-adventures?level=1&**lang=en**&tag=&search=. The same applied to all available filters. Additionally, this means that you can share a url with someone and they would see the exact same adventures you've filtered. So, if you share `/public-adventures?level=1&lang=&tag=print&search=parr` with another teacher, they will see exactly what you see:
![image](https://github.com/hedyorg/hedy/assets/20051470/e1707e39-d041-4ceb-a64f-9e7fdc127d9c)

# **How to test?**
Go to `/public-adventures` and start applying some filters, run some code of any adventure you like, and perhaps clone one that's created by some other user. 

# **Technicality (for devs)**

Whenever a filter is applied, we send a request to python and expect two things:
- `html`: the template of the new filtered adventures, to replace the current adventure tabs with. 
- `js`: some properties that are needed for js; e.g., to initialize the editor.

The html is simply a string that we replace the innerHTML of the target element that includes the editor and tabs. And since this is a string, we need to manually initialize the JS code; e.g., run the `initializeHighlightedCodeBlocks` or initialize the editor with the selected level.

The reason why I didn't use htmx here is due to the fact that the created template that has the editor and tabs (i.e., in `public-adventures-body.html`) does not issue a rerender on the js side. Most probably, this behavior is because htmx only replaces a target element by whatever the server returns and does not mind the `js` property that we pass to the template. As a result, the editor and tabs become just views with no interactivity.

Another matter is the usage of Tailwind Elements. I used this for two reasons: it uses Tailwind (which we also do) and it has a plenty of already styled elements. The problem with TE is that they don't support RTL currently, [however, they did mention that they're working on it](mdbootstrap/TW-Elements#2264 (comment)). So, let's just keep using our custom select that I created, until they fix that issue or we need some of the beautiful components they provide.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants