fix(post-form): restore native board selector appearance

Exclude the board dropdown from post-form field chrome so it keeps the
browser default select styling, matching flag selector behavior.
This commit is contained in:
Tommaso Casaburi
2026-06-02 14:58:32 +07:00
parent ea7883b107
commit a7cd3ac87f
3 changed files with 13 additions and 3 deletions
@@ -565,6 +565,7 @@ describe('PostForm', () => {
expect(linkInput?.getAttribute('placeholder')).toBe('https://website.com/image.jpg'); expect(linkInput?.getAttribute('placeholder')).toBe('https://website.com/image.jpg');
expect(textarea).toBeTruthy(); expect(textarea).toBeTruthy();
expect(select).toBeTruthy(); expect(select).toBeTruthy();
expect(select?.className).toContain('boardSelector');
await dispatchInput(linkInput as HTMLInputElement, 'not-a-url'); await dispatchInput(linkInput as HTMLInputElement, 'not-a-url');
await clickByText(table as HTMLTableElement, 'post'); await clickByText(table as HTMLTableElement, 'post');
@@ -69,7 +69,7 @@
position: relative; position: relative;
} }
.postFormTable input[type="text"], .postFormTable textarea, .postFormTable select:not(.flagSelector) { .postFormTable input[type="text"], .postFormTable textarea, .postFormTable select:not(.flagSelector):not(.boardSelector) {
border: var(--post-form-field-input-border, revert); border: var(--post-form-field-input-border, revert);
font-family: var(--post-form-field-font-family, revert); font-family: var(--post-form-field-font-family, revert);
appearance: var(--post-form-field-input-appearance, revert); appearance: var(--post-form-field-input-appearance, revert);
@@ -80,10 +80,14 @@
font-size: 10pt; font-size: 10pt;
} }
.postFormTable input[type="text"]:focus, .postFormTable textarea:focus, .postFormTable select:not(.flagSelector):focus { .postFormTable input[type="text"]:focus, .postFormTable textarea:focus, .postFormTable select:not(.flagSelector):not(.boardSelector):focus {
border: var(--post-form-field-input-focus-border, revert); border: var(--post-form-field-input-focus-border, revert);
} }
.boardSelector {
appearance: auto;
}
.postFormTable td > input[type="text"] { .postFormTable td > input[type="text"] {
width: 244px; width: 244px;
} }
+6 -1
View File
@@ -432,7 +432,12 @@ const PostFormFields = ({
<tr> <tr>
<td>{t('board')}</td> <td>{t('board')}</td>
<td> <td>
<select aria-label={t('board')} onChange={(e) => setPublishPostOptions({ communityAddress: e.target.value })} value={communityAddress}> <select
aria-label={t('board')}
className={styles.boardSelector}
onChange={(e) => setPublishPostOptions({ communityAddress: e.target.value })}
value={communityAddress}
>
<option value=''>{t('choose_one')}</option> <option value=''>{t('choose_one')}</option>
{isInAllView && {isInAllView &&
directories.map((community) => directories.map((community) =>